フロントエンドエンジニアのマストツールGulp(ガルプ)。Sassコーディングが普及してきて、導入された方も多いのではないでしょうか。
なぜか最近わたしのまわりで導入する方が急に増えてきたため、過去にさらっと使ってみた経験を思い出し、改めてGulp(ガルプ)をきちんと学んで導入してみました。
Gulp(ガルプ)とは何か改めて説明
Gulp(ガルプ)とは、
gulpはNode.jsをベースとしたビルドシステムヘルパーです。以前CodeGridでも紹介したGruntと似た目的を持って作られたツールで、gulpを使えばさまざまな作業を自動化することができます。gulpの一番の特徴はサイトのトップページで「ストリーミングビルドシステム」と自ら名乗っているように、ファイルの処理をストリームで行うというところです。この特徴によって複雑なタスクも細かくカスタマイズして書くことができます。
詳しく解説されているサイトは多く存在していますが、上記サイトはとても細かく解説されていますので、さらに詳しく知りたい方はご覧になってみてください。
Gulpは広く一般的には「タスクランナー」の一種
「タスクランナー」という言葉があり、Gulpはそれに属するツールの一つです。厳密にいうとGulpはタスクランナーではないとの見方もありますが、一般的にはタスクランナーの一つとして考えてOKです。
類似ツールにGrunt(グラント)というものがありますが、実行環境や用途が若干違います。とっつきやすさで言えばGulpをおすすめします。
コーディング現場的タスクランナーを解説
cssコーディングをする際に、scssファイルのコンパイル作業、ベンダープレフィックス付与作業、レスポンシブスタイルのブレークポイント毎の並べ替え作業、cssやjsファイルのミニファイ作業など、１つのCSSを完成させるまでに必要な“作業タスク”がいくつかありますよね。
また画像ファイルを追加する際にファイルを圧縮もしますよね。
htmlやcssやjsやimgを触る際に、サイト完成までには様々な“作業タスク”が発生し、作業者は知らない間に色々なツールを使いコツコツコツコツ色々な作業をしているわけです。
その中でもコーディング時に発生する複数の“作業タスク”を機械的にミスなく実行してくれるツールがタスクランナー＝Gulp(ガルプ)なのです。
具体的に何が便利なのか
Gulpの最大恩恵を受けるケースとしてはチーム作業でのSass(サス)コーディングを場合でしょう。
scssファイルのcssコンパイルにはこれまでCompassを使ったり、Koalaを使ったりとコンパイル出来る方法はあったのですが、なにせコンパイル専用であったために、コンパイル以外の様々な作業が往復してしまいクオリティにムラがでてしまいました。
とくにチーム作業を行う場合はアウトプットクオリティを均一化できれば、作業戻りも少なく非常に効率的になりますね。
具体的な便利事例は、前項にほとんど記載してしまいましたが主に以下の６つです。
- scssファイルをcssにコンパイルする
- めちゃめちゃに書いたスタイルの順番を整理する
- ベンダープレフィックスを必要なものに自動付与する
- レスポンシブのブレークポイントごとにコードをまとめてくれる
- コンパイルしたcssファイルをミニファイする
- 画像ファイルを追加したら自動で圧縮する
うん、すばらしいです。
これだけのことをファイルを保存した瞬間、コマンドを走らせた瞬間に一気に実行してくれます。
今まで複数のアプリを実行していたので、とても作業が時短できました。
他にも色々できるけど、、、
実際にできることはこれだけではありません。Gulpの真価を発揮させたいならまだまだたくさんのプラグインがありますので、色々同時に実行させちゃいましょう！
ただ、
ここから先は個々人の作業によって必要なものを取捨選択する領域になります。html/css/javascriptをコーディングするフロントエンドエンジニアであれば、前項６つでOKです。あとお好みで２つくらい足してもよいでしょう。
あくまで、私の見解ですが、色々プラグインを使って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”]
