2015/01/15

Web

使用しているgulpのプラグインについて

さっくりと僕がgulpに入れているプラグインを列挙。

gulp自体のインストールは大変ではありません。
余裕があったらそっちについても合わせて書いてみたいところ。

長くなってるので以下からどうぞ。

CSS関連

gulp-sass

gulpでSassをコンパイル出来るようにするプラグインです。
同様な機能を持つプラグインで”gulp-ruby-sass“があります。

ただ、”gulp-ruby-sass”の方を利用する場合はRubyのインストールも必要。
Rubyを使う予定がなければ”gulp-sass”で事足りるかと。

違いはあると思うけど未調査。

※余談ですが、僕はSass派ですがLess用のプラグインもあるので安心。

gulp-csscomb

CSSのプロパティの表記を決めたルールで整頓・統一させる。

表記ルールを指定するに”.csscomb.json”を作成して定義する必要があります。
定義ファイルの内容を作成するに、こちらを利用するのが一般的(?)かと。

gulp-autoprefixer

名前からなんとなく察せれる、ベンダープレフィックスを自動付与してくれるプラグイン。

つけ忘れや最初からベンダープレフィックスを気にしないで記述出来るので楽に。

gulp-minify-css

CSSをminifyしてくれるプラグイン。

それ以上も以下も説明はいらないですね。
巨大になったCSSの容量軽減や難読化させる常套手段。

JS関連

gulp-uglify

JavaScriptをminifyしてくれるプラグイン。
僕はJavaScriptではなく、jQueryを書くタイプなのであまり利用していないがとりあえず。

画像関連

gulp-imagemin

画像の容量を劣化せずに圧縮してくれるプラグイン。
オプションで色々設定できるけど割愛。

エラー関連

gulp-plumber

watch中にエラーが出ると普通だとwatch状態が解除されてしまうが、解除されないようにするプラグイン。
絶対にソースでエラーを起こさない、という人以外は絶対に入れた方がいい。

gulp-notify

エラーが起きた時に通知してくれるようにさせるプラグイン。
上記のgulp-plumberと合わせて使うのがベター。

その他

gulp-changed

ファイルの差分を確認して、差分があったらそれだけを更新するようにするプラグイン。
着手するファイルの数が多いプロジェクトの時とかにいいかも。

gulp-cached

入れてあるけど特に利用していない。
そろそろ消そうかな。

Twitter