第2回「Gulpを使ってできること」

  • このエントリーをはてなブックマークに追加

はじめに

こんにちは!
テンダ仙台支店webデザイナーのホンマです。

今回は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を使ってできること」

第3回「Gulpを導入してみよう!その1」

第4回「Gulpを導入してみよう!その2」

第5回「Gulpを導入してみよう!その3」

第6回「Gulp活用 実際のweb制作では」

  • このエントリーをはてなブックマークに追加
株式会社テンダ
第2回「Gulpを使ってできること」
テンダ仙台支店
サイトトップ
支店情報
オフィス情報
取り組み
ヴィジョン
事業紹介
開発分野
開発言語
パッケージ
実績紹介
すべて
開発実績
デザイン実績
その他
採用情報
ブログ
お問い合わせ
Copyright© TENDA Co.,Ltd. All Rights Reserved.