マークアップエンジニアが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の理解も深まるので、できて損はないかなと。是非一度、オレオレ処理で楽しくコーディングライフを自動化してみてください!