当方は3年ほどWeb制作で飯を食べているエンジニアです。

普段のコーディングはGulpを使ってある程度、処理を自動化して効率化しています。(常に使っているわけではない)

その甲斐あってか、長めでフルスクラッチのLPがだいたい1日もあればできるレベルのスピード感があります。(僕より速い人はいくらでもいますが、、、)

そんな僕が普段Gulpで行なっている処理とプラグインをまとめます。

Gulpで行なっている6つの処理

僕が普段Gulpで行なっている処理は、

  1. htmlを整形
  2. htmlをejsでテンプレート化
  3. ソースを更新した際に自動でブラウザリロード
  4. scssのコンパイル、ミニファイ
  5. javascriptのミニファイ
  6. 画像の自動圧縮

この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で使っているプラグイン・モジュールは以下です。

  1. es6-promise
  2. gulp-autoprefixer
  3. gulp-browserify
  4. gulp-changed
  5. gulp-clean-css
  6. gulp-csscomb
  7. gulp-ejs
  8. gulp-merge-media-queries
  9. gulp-plumber
  10. gulp-rename
  11. gulp-sass
  12. gulp-sourcemaps
  13. gulp-svgmin
  14. gulp-uglify

それぞれ軽くコメントすると

  1. es6-promise:polyfill用のおまじない
  2. gulp-autoprefixer:cssのベンダープレフィックス付与
  3. gulp-browserify:ソース更新でブラウザリロード
  4. gulp-changed:画像の自動圧縮関連
  5. gulp-clean-css:cssをミニファイ
  6. gulp-csscomb:cssを整える
  7. gulp-ejs:Gulpでejsを扱う
  8. gulp-merge-media-queries:メディアクエリをまとめる
  9. gulp-plumber:エラーでの強制終了を防ぐ
  10. gulp-rename:ファイル名変更
  11. gulp-sass:Gulpでscssのコンパイル
  12. gulp-sourcemaps:scssのソースマップを出力(scssでデベロッパーツールをいじれる)
  13. gulp-svgmin:svgの圧縮
  14. gulp-uglify:javascriptのミニファイ

こんな感じです。

まとめ:Gulpは便利だけど不便かも

Gulpは自分で好きな処理を自由に作れます。

が反面、nodeやgulpにプラグインのバージョンに依存してしまいますので、何か変えると動かなくなることが多々あります。(正直取り回し悪い気が。。。)

また、プラジェクト毎に全部インストールが必要なので、PCの容量を圧迫します。(ノートPCだとちょい問題)

実際便利なのですが、versionアップしたら使えなくなりそうで、nodeやgulpのバージョンをあげるのに億劫になります。

最近だと、nuxt cliやwebpackなどがあるので、Gulpやらずにそっちでやる方が使いやすそうです。

タスクランナーなら、npm scriptなどもあるので、GulpやGuretあたりはだんだん枯れていくんじゃないかなと思っています。。。(小声)

が、nodeやnpmの理解も深まるので、できて損はないかなと。是非一度、オレオレ処理で楽しくコーディングライフを自動化してみてください!

おすすめのテキストエディタはVSCode
Gulpよりも楽にsassやjsの圧縮をするならKoalaがいい