Web制作 上谷亮太

マークアップエンジニアがGulpで行なっている処理とプラグインまとめ

当方は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にこだわる必然はありません。(チーム開発は除く)

2017.06.19

bracketsでsassを使う方法と設定を初心者向けにまとめてみる

僕愛用のテキストエディタBracketsでsassを使う方法について。 フリーランスで仕事するとわかるんですが、仕事は早くやればやるほど、時給換算すると高くなります。これはコーディングも同じで、早くコ...

5. javascriptのミニファイ

javascriptは基本圧縮しています。その方が早かったり、ソースの恥ずかしい部分を隠せるので。(笑)

なお、これもKoala使えばできるので、Gulpの必然はない。(ただし、Koalaだとちょい重い)

2017.08.27

koalaでjsファイルを保存したときに自動で複数ファイルを圧縮[minify]するあれこれ

最近、このブログをリニューアルすべく、Wordpressテーマを自作していました。 せっかく作るので、高速化にもこだわり、googleのスピードテストと向き合いながら作ってました。 PageSpeed Insights ...

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

おすすめのテキストエディタ
2019.02.03

【2019年版】VSCodeでWeb制作でhtml/css/jsにおすすめの拡張機能

当方は3年ほど、Web制作で生計を立てています。 テキストエディタ経歴は、 Atom(3ヵ月) Sublime text3(半年) Brackets(1年半) VSCode(1年) と渡り歩いていいます。 今日は...
Gulpよりも楽にsassやjsの圧縮をするならKoalaがいい
2019.03.31

【sass/js】無料のGUIコンパイラーKoalaでコーディングを楽にしよう!

タイトルの通りです。 コーディングは早くやればやるほどお金が稼げるので、そのためのツールのお話。 コーディングの効率化は テキストエディタにプラグインなどをカスタムする Sassなどの...