gulp(ガルプ)との出会い
東区フロントエンド勉強会に参加したことがきっかけでgulpを知ることができました。

gulpが動く環境作り
東区フロントエンド勉強会の主催者：末包さんが準備されましたスライドを参考にgulpが動く環境をつくり事ができます。

gulp + sass で目指せ倍速コーディング:環境準備編

gulpを使ってコーディング
「gulpを使ってsassを動かしてみる。」という目標をたてた上で以下のスライド資料を参考にしながら進めると大まなか概要を知ることができます。

gulp + sass で目指せ倍速コーディング

ここまでは、さらっときましたが、実際に手を動かしてみるいろんなエラーが出たりして動くまではいろいろと大変でした。ただ、その分からないところを調べながら、検証しながら進めるのが楽しいんですよね！

復習
ハンズオンの勉強会は、動くまでの手順を体験できますが、それに理解がついてくるほど自分は賢くないので、時間を見つけて復習しています。
今回はgulpそのものから「gulpfile.js」の中身など基礎と基本の部分を重点的に復習しました。
きっかけは、ハンズオンで完成したgulpfile.jsを後から見て思ったが「なんとなくは分かるけど、カスタマイズが出来ない！」という事でした。

プラグインのインストール
gulpの特徴はプラグインをインストールすることで自分ごのみ環境を構築できるところだと感じました。

gulp-slim
gulp-slim
slimの記述ルールでマークアップが可能になります。

gulp-plumber
gulp-plumber
コンパイル時にエラーが生じてもプロセスを終了せず継続することが可能になります。
ちなみにcompassと一緒に設定する場合は以下ような設定するとよい。

  .pipe(plumber({
      errorHandler: function (error) {
        console.log(error.message);
        this.emit('end');
    }}))

gulp-sass
gulp-sass
sassの利用が可能になります。

gulp-compass
gulp-compass
compassの利用が可能になります。

gulp-autoprefixer
gulp-autoprefixer
CSSを利用する際に接頭詞（ベンダープレフィックス）が必要なプロパティに対して自動的に付加してくれます。

gulp-combine-media-queries
gulp-combine-media-queries
CSSでMedia Queryを使用した場合、記述内容を整理してくれます。

gulp-csscomb
gulp-csscomb
CSSを利用する際にフォーマットをキレイにまとめてくれます。
※ジェネレーターはこちら

gulp-minify-css
gulp-minify-css
CSSを圧縮(min)をおこなってくれます。

gulp-rename
gulp-rename
出力ファイル名を変更することができます。
詳細参考サイト：gulp-rename って？

run-sequence
run-sequence
gulpfile.js内のtaskを順次実行することが可能になります
詳細参考サイト：gulp の run-sequence を使うときは return を忘れずに

gulp-imagemin
gulp-imagemin
画像の圧縮が可能になります。
詳細参考サイト：gulp-imageminプラグインとは

imagemin-jpegtran
imagemin-jpegtran
JPG画像を圧縮する際に、これが無いとうまく動作しないみたいです。

imagemin-optipng
imagemin-optipng
PNG画像を圧縮する際に、これが無いとうまく動作しないみたいです。

gulp-changed
gulp-changed
srcとdestを比較して変更があったファイルをチェックしてくれます。
詳細参考サイト：gulp-changedプラグインについて