マークアップエンジニアがGulpで行なっている処理とプラグインまとめ
当方は3年ほどWeb制作で飯を食べているエンジニアです。
普段のコーディングはGulpを使ってある程度、処理を自動化して効率化しています。（常に使っているわけではない）
その甲斐あってか、長めでフルスクラッチのLPがだいたい1日もあればできるレベルのスピード感があります。（僕より速い人はいくらでもいますが、、、）
そんな僕が普段Gulpで行なっている処理とプラグインをまとめます。
Gulpで行なっている6つの処理
僕が普段Gulpで行なっている処理は、
- htmlを整形
- htmlをejsでテンプレート化
- ソースを更新した際に自動でブラウザリロード
- scssのコンパイル、ミニファイ
- javascriptのミニファイ
- 画像の自動圧縮
この6つの処理です。まあ、一般的な処理なのかなと。
それぞれもうちょい詳しく説明します。
1. htmlを整形
htmlはGulpで自動整形しています。
テキストエディタのVSCodeでも自動整形をしていますが、Gulpでは、余計な余白を削ったり、コメントを全部削除していたりします。
開発中の余計なコメントはソースに出したくありません。
2. htmlをejsでテンプレートに
僕がGulpを導入したきっかけです。
htmlをテンプレートにしたいがために、Gulpを導入しました。
ejsはjavascript的な記述で、htmlをテンプレートにしたり、ifで条件分岐したものをコンパイルしてhtmlを生成できます。
phpでやってもいいのですが、mampとか立ち上げるの微妙に面倒なので、ejsでhtmlを生成しています。（こっちはこっちでGulp立ち上げるの面倒ですが、、、）
3. ソースを更新した際に自動でブラウザリロード
よくあるやつですね。
Gulpといえばこれ！みたいな感じもあります。
が、テキストエディタ側のプラグインでできるやつもあるので、Gulpじゃないとできない訳ではないかなおと。（WordPressとかシステムが関わると別ですが、）
4. scssのコンパイル、ミニファイ
普段は、Scssを使ってcssを使っています。
そのためのコンパイルをGulpでやっている。ついでにcssにミニファイも。
まあこれも当たり前っちゃ当たり前。
Sassを使いたいだけなら、GulpじゃなくてKoalaとかGUIのタスクランナーでいいので、Sass目当てなら無理にGulpにこだわる必然はありません。（チーム開発は除く）
5. javascriptのミニファイ
javascriptは基本圧縮しています。その方が早かったり、ソースの恥ずかしい部分を隠せるので。（笑）
なお、これもKoala使えばできるので、Gulpの必然はない。（ただし、Koalaだとちょい重い）
なお、javascriptを1つにまとめるのは、動作が微妙になることがあるのと、使っているjavascriptプラグインの把握が大変になったりするので、基本やらないようにしています。（そもそもプラグイン使わずにだいたい自作しますゆえ）
6. 画像の自動圧縮
Gulpを使って一番楽になったのがこの画像の自動圧縮です。
画像の圧縮ツールは色々ありますが、どれもそこまで圧縮してくれないので不満でした。
一番気に入っているのは、ブラウザツールのtinypngなんですが、無料だと1回に20枚までしか圧縮できないため、非常にめんどくさい。
今では、Gulp起動しとけば全部いい感じに画像圧縮してくれているので、これは他には真似できず重宝しています。
Gulpで使っているプラグイン・モジュール
Gulpのいいところは、自分で処理やプラグインを入れて好きなことができる点です。
僕がGulpで使っているプラグイン・モジュールは以下です。
- es6-promise
- gulp-autoprefixer
- gulp-browserify
- gulp-changed
- gulp-clean-css
- gulp-csscomb
- gulp-ejs
- gulp-merge-media-queries
- gulp-plumber
- gulp-rename
- gulp-sass
- gulp-sourcemaps
- gulp-svgmin
- gulp-uglify
それぞれ軽くコメントすると
- es6-promise：polyfill用のおまじない
- gulp-autoprefixer：cssのベンダープレフィックス付与
- gulp-browserify：ソース更新でブラウザリロード
- gulp-changed：画像の自動圧縮関連
- gulp-clean-css：cssをミニファイ
- gulp-csscomb：cssを整える
- gulp-ejs：Gulpでejsを扱う
- gulp-merge-media-queries：メディアクエリをまとめる
- gulp-plumber：エラーでの強制終了を防ぐ
- gulp-rename：ファイル名変更
- gulp-sass：Gulpでscssのコンパイル
- gulp-sourcemaps：scssのソースマップを出力（scssでデベロッパーツールをいじれる）
- gulp-svgmin：svgの圧縮
- gulp-uglify：javascriptのミニファイ
こんな感じです。
まとめ：Gulpは便利だけど不便かも
Gulpは自分で好きな処理を自由に作れます。
が反面、nodeやgulpにプラグインのバージョンに依存してしまいますので、何か変えると動かなくなることが多々あります。（正直取り回し悪い気が。。。）
また、プラジェクト毎に全部インストールが必要なので、PCの容量を圧迫します。（ノートPCだとちょい問題）
実際便利なのですが、versionアップしたら使えなくなりそうで、nodeやgulpのバージョンをあげるのに億劫になります。
最近だと、nuxt cliやwebpackなどがあるので、Gulpやらずにそっちでやる方が使いやすそうです。
タスクランナーなら、npm scriptなどもあるので、GulpやGuretあたりはだんだん枯れていくんじゃないかなと思っています。。。（小声）
が、nodeやnpmの理解も深まるので、できて損はないかなと。是非一度、オレオレ処理で楽しくコーディングライフを自動化してみてください！
