フロントエンドエンジニアのマストツールGulp(ガルプ)。前記事ではGulpとはどういうものなのかを説明しました。Gulpを最大限に活用しコーディング労力軽減の恩恵を受けるにはやはりプラグインを適切に使わなければなりません。
現役フロントエンドエンジニアの自分が使用してみた感覚で、これがあれば大丈夫というプラグインを選びましたので是非参考にしてみてください。
インストールまでの流れは参考記事をご覧になってください。
[2018/1/16 →プラグインの種類を変更しました]
まずはGulpをインストールして環境を作ろう
何はともあれGulpの実行環境を作りましょう。
詳しいインストール方法は多くの文献が存在しますが、この記事がシンプルでわかりやすいので、参考にしてみてください。
Gulpのインストールや起動はコマンドラインから全て行います。スタンドアロンのGUIアプリがあればわかりやすくていいのでしょうけど、現状はコマンドラインで全て行います。
前記事でも触れましたが、GulpはNode.jsをベースに動きますので、Node.jsをインストールしてください。
インストールはnpm（Node Package Manager）というコマンドから必要なものをネットワークインストールしていきます。
nmpの設定がおわりましたら、Gulp本体ののローカルインストール、グローバルインストールを行います。
ローカルとグローバルの違いは下記説明がわかりやすいです。
ローカルインストールとグローバルインストール
ローカルインストールはそのプロジェクトのフォルダ内でのみ利用できる。グローバルインストールはそのマシン上のどこからでも利用できるようになる。
デフォルトはローカルインストールされるようになっており、グローバルインストールしたい場合は -g オプションを付けて実行する。
Gulpのインストールが終わったらいよいよプラグインのインストール、そしてキモとなるgulpfile.jsを作成します。
りょうま的おすすめGulpプラグイン
現在、私が選び抜いて実際使用しているプラグインは下記です。
- gulp-sass cssコンパイル
- gulp-csscomb cssプロパティ順序
- gulp-autoprefixer ベンダープレフィックス付与
- gulp-group-css-media-queries CSSメディアクエリー整理
- gulp-imageoptim 画像圧縮
- gulp-changed 変更のあったものを監視
- gulp-plumber watch中にエラー防止
- gulp-notify エラーを通知
以上８つになります。
①〜④までがcss関連、⑤が画像圧縮、⑥〜⑧が補助的なものです。
え？これだけ？と思うかもしれませんが、
はい、これだけで十分と判断しました。
私は若干ナマケモノなところがあり、Gulpは「gulp」コマンドを最初に実行して監視しておいたら、あとはGulpに関しては放置でコーディングをしています。
ですので、人によっては細かく「gulp ◯◯」とコマンドを使い分けていくかと思いますが、私はファイル保存時にGulpコマンドが走るようになっているので、上記のみがミニマムな”必要作業タスク”として設定しています。
あとはお好みであと２つくらいは足してもいいかもしれませんが、gulpコマンド処理が重くなりすぎてしまうところも懸念点ですので、実行マシンのスペックなんかと相談しながら入れてみてください。
CSSやJSをミニファイするコマンドですが、これは最後の最後で良いと思います。
絶賛作業中にCSSやJSファイルがミニファイされてしまうと、解読が困難でなにかと煩わしくなりますので、ミニファイ用のフォルダ（または別名保存）を別で用意しておいてもよいかもしれません。
ミニファイするプラグインは下記がおすすめです。
- gulp-uglify JS圧縮
- gulp-clean-css css圧縮
どっちみちこのコマンドを走らせるのは最後の最後ですかね。
次回は、Gulpのキモ、gulpfile.jsの作成方法、また案件別で同一のGulpを利用したい場合のディレクトリ配置のやり方をご紹介したいと思います。
[st-card id=591 label=”関連” name=”” bgcolor=”” color=”” readmore=”on”]
[st-card id=603 label=”関連” name=”” bgcolor=”” color=”” readmore=”on”]
[st-card id=610 label=”関連” name=”” bgcolor=”” color=”” readmore=”on”]
