もくじ
はじめに
こんにちは！
テンダ仙台支店webデザイナーのYHです。
今回はGulpのメリットと実際にできることを見ていきましょう。
数あるタスクランナーからどうしてGulpを選んだのかというお話です。
Gulpを選んだ理由
処理が速い
gulpは高速なタスクランナーと言われています。
様々なタスクを非同期で行う（複数タスクを一斉に処理する）ので動作が速いそうです。
処理をひとつずつ行うGruntより高速に動きます。
大規模なwebサイトを制作する場合でも処理が早いため、より効率的な作業を行えます。
EJSが使える
Gulpは「EJS」と呼ばれるテンプレートエンジンを使うことができます。
テンプレートエンジンを使うことで、各ページ共通のヘッダーやフッター、headタグなどを共通パーツとしてコンテンツとは別に管理できるようになります。
例えば、後々にヘッダーに修正が発生しても共通パーツの1ファイルを修正するだけで全ページに反映できるということです。
EJSはhtmlにJavaScriptを混ぜ込むような書き方をするため、htmlやjsの書き方がわかっていれば、ほぼ抵抗なく書くことができます。
なお、EJSは最終的にhtmlとして出力されます。
覚えやすい
自動化のための設定ファイルが比較的わかりやすいのもメリットです。
メソッドチェーンも使えるのでjQueryなどが書けるなら、抵抗なく書くことができます。
私も導入時に詰まることなく設定ファイルを作成できました。
実際にできること
次はGulpを使って効率化される作業を見ていきましょう。
よく自動化されるのは以下のような作業です。
EJSからhtmlを出力
テンプレートエンジンを使うメリットは先に説明した通りですが、EJSのままではブラウザで表示できません。
EJSで書いたテンプレートやパーツから最終的なhtml生成する必要があります。
このときのページ生成をGulpは一括して行ってくれます。
Sassコンパイルと圧縮
GulpではSassコンパイルを行うことができます。
Sassはcssプリプロセッサと呼ばれるもので、より簡単に書けるようにしたcss言語です。
ただし、Sassはそのままではcssの代わりにはならず、cssにコンパイル（再構築）する必要があります。
Gulpはこのコンパイルも引き受けてくれます。
JavaScriptの圧縮
jsは余分なスペースや空行などを削除、圧縮することで容量を落とすことができます。
ファイル転送量などを気にしなければならない要件の場合、有効な方法です。
本来はツールやオンラインサービスを利用して行うのですが、ここもGulpで行うことができます。
代表的なものを挙げてみましたが、これらはプラグインで機能を追加します。
実際はもっと多くのことを任せることができるので、自分好みのGulpにしていくことができます。
次回はGulpのインストールと、自動化を設定するまでを見ていきましょう。
他の記事
第1回「web制作が便利に！Gulpを知った気になれる記事」
第2回「Gulpを使ってできること」