Preprosが有料化したので乗り換えた
Preprosが有料化したようで起動の度に「金払え」、定期的に「金払え」とうるさくなり、暴走する頻度が増えた。
使用頻度は高くなってるので金を払ってもいいレベルかもしれないけど、超多機能なPreprosのSCSSとjavascript最小化にしか使って無く損した気分になるので乗り換えることにした。
かといってWindowsなので乗り換え先が少ない。以前はSCOUTを使っていたが最近人気が無いようなので、コマンドライン式のコンパイラーを使うことにした。
コマンドライン式のSASSはrubyで動いてるので、まずrubyのインストールRubyInstaller for Windowsにて7-zip版をダウンロードして解凍、場所は何処でもいいが、いつかサーバーサイドスクリプトとして使うかもしれないのでxampのフォルダに「ruby」というフォルダ名で配置することにした、システムの環境変数のPathに「C:\xampp\ruby\bin」を追加してにパスを通す。
確実に反映させる為再起動する。
コマンドプロンプトでパスが通ってるか確認
> ruby -v
ruby 2.2.1p85 (2015-02-26 revision 49769) [x64-mingw32]rubyのパッケージングシステムgemでsassをインストールするが、gemをアップデートする。
ウチの場合2.4.5から2.4.6になった。
> gem -v
2.4.5
> gem i rubygems-update
> update_rubygems
> gem pristine --all
> gem -v
2.4.6SASSをインストールする。同時にSCSSでも利用出来るようになる。
> gem install sass
> sass -v
Sass 3.4.13 (Selective Steve)
> scss -v
Sass 3.4.13 (Selective Steve)次にSASSにフォルダを監視するにはコマンドプロンプトで任意のWEBルートフォルダに移動して
> sass --watch css --style compact --sourcemap=none --cache-location %USERPROFILE%/.sass-cacheと打ち込めば監視がスタートし、「Ctrl＋C」で停止する。
コマンドは
–watch cssは監視するフォルダ名の指定で、私の場合入力フォルダも出力フォルダも同じなので一つだけど分けてる人はscss:cssという感じに入力フォルダと出力フォルダをコロンで区切ればOKだし、scssファイルが一つしか無い場合は「style.scss:style.css」という風にファイル名を指定する事も出来る。
–style compactの部分は圧縮方法でnested、expanded、expanded、compressedの順にコンパクトになる。
–sourcemap=noneは最近のSassはSource Mapsというデバッグ用のファイルが自動で作成されます。これはFirefoxのFirebugやChromeのDeveloper Toolsで「CSSの行数言われても」って時にSCSSの行数を表示してもらえるように目次が書かれたファイルです、今回は小規模サイトで別にいらないのでnoneを指定して生成しないようにしています。
–cache-location %USERPROFILE%/.sass-cacheはSASSがコンパイルを高速処理するために生成される「.sass-cache」フォルダの場所を設定する。この場合はユーザープロファイルフォルダにまとめる感じになってる。（もしも複数サイトを運営していても「.sass-cache」フォルダ内にハッシュ名のフォルダが作られるので重複する心配は無い。）「–no-cache」として削除する事も出来る
実際に監視を開始しSCSSを書き換えてみると
Decode error – output not utf-8
とエラーが出てコンパイルに失敗した。
どうもrubyの奴に文字コードを知らせてやらないとエラーが出るらしい
> set RUBYOPT=-EUTF-8を実行した後に実行すれば正常にコンパイルされた。
いちいち、任意のフォルダに移動してコマンドを打ち込むのも面倒なのでバッチファイルを作る事にします。
下記の内容をwatch.batというファイル名でWEBルートに置く。
cd /d %~dp0
set RUBYOPT=-EUTF-8
sass --watch css --style compact --sourcemap=none新しく出た1行目は実行するフォルダに移動（/dでドライブも移動）
これで今後は「watch.bat」をダブルクリックするだけで監視がスタートする。
SASSの方はMixinが用意されたCompassを使う方法もあるが使わないベンダープレフィックスがウザイし、Sublime Textのビルドコマンドを使えるようにしたり出来るがいちいちビルドするのが面倒なので、現在はSASSをバッチ機能で監視させる方法に落ち着いてます。
あとはjavascriptのminify（最小化）の方だが最小化も色々ソフトがあるがuglify-jsを使ってみることにした。
既にNode.jsがインストールしてるのでnode.jsのパッケージングシステムnpmでインストールするとすぐに使える。
> npm install -g uglify-jsポイントは -gを付けてコマンドプロンプトからダイレクトに操作可能にしてる所です。
（もちろん、複雑な動作をさせたい場合はコマンドプロンプトを使わずスクリプトを書いてnode.js経由でuglify-jsで動作をさせる事も可能です。）
個人的に、min無しがDevelopment（開発用）minありがDistribution（公開用）という使い方をしていてjavascriptを最小化は公開直前にするだけだが、それでもコマンドを入力するのは面倒なのでバッチファイルを作った。
下記の内容をjs-min.batというファイル名で保存。
cd /d %~dp0
uglifyjs -c -m -o js\common.min.js js\common.js-c 圧縮率高めにする。
-m 変数名とかも短縮する。
-o js\common.min.jsは出力ファイルの指定です。
Sassの所で書いたSource Mapを使いたい場合は「–source-map js\common.js.map」とすればOK。
これで「js-min.bat」をダブルクリックするだけで最小化される。
Tags: CSS, JavaScript, SASS