Gulpとは?

GulpはNode.jsベースのタスクランナーである。繰り返し作業やフロントエンドビルドに必要な作業を、Gulpで簡単に処理できる。
Tags:

Web開発では多くの作業が必要になる。現在のWebサイトではPCだけでなくモバイルレイアウトも用意する必要があり、モバイルの弱い通信速度でもできるだけ早く表示するため、次のような作業も必要になる。

  • CSSのブラウザ互換対応、結合、圧縮
  • JavaScriptの結合と圧縮
  • 画像の可逆圧縮

これらを手作業で行うと非常に時間がかかる。こうした面倒な作業を自動化するために作られたものがタスクランナーツールである。タスクランナーは多数の自動化ツールの総称であり、ここではその中でも人気のあるGulpについて説明する。

Gulpとは?

GulpはHTML、CSS、JavaScriptのコーディング分野、つまりフロントエンドに特化したタスクランナーである。

似たツールはいくつかあるが、Gulpには次の特徴がある。

  • Node.js上で動作し、WindowsとMacの両方で使える。
  • 設定ファイルがJavaScriptなので、フロントエンド開発者が扱いやすい。
  • 複数の処理を同時に実行できるため処理速度が速い。
  • プラグインが豊富である。

処理速度の速さも強みだが、Gulpは何よりプラグインが豊富で、コミュニティ活動が活発な点が大きな強みである。

gulpでできること

gulpプラグインを活用すると、次のような作業を完全に自動化できる。

CSS、JavaScriptなどのminify

CSSやJavaScriptなどのテキストファイルは、開発中は人が読める形式である必要がある。しかし本番環境にアップロードして使うときは、ブラウザが解釈できればよいため、空白などの不要な部分はできるだけ削除するべきである。これによりロード時間と電力消費を節約できる。Googleも推奨しており、検索順位にも影響するとされる。

SassやLESSからCSSへの自動コンパイル

Web開発ではCSSを直接書くのではなく、SassやLESSなどのCSSプリプロセッサ、つまりCSSメタ言語を使って書くことがある。こうするとスタイルを簡潔に書け、CSSで書くより読みやすくなるためである。SassやLESSで書かれたファイルは最終的にCSSへコンパイルされる。また、CSSへコンパイルするときにCSS接頭辞を自動付与することもできる。

画像圧縮

一般的なサイトでは、画像がサイトのデータ量の大部分を占める。そのため、できるだけ品質を落とさず、つまり可逆圧縮処理を行うのがよい。また画像に関連するメタデータを削除してファイル容量を減らすこともできる。特にPNG画像はファイルによって70%以上圧縮される場合もあるため、実行する価値がある。

CSS作成時のリアルタイム監視

gulpの監視タスク、つまりwatchを作ると、ファイルの変更に合わせて処理を実行できる。

Gulpのインストールと使用

事前準備

GulpはNode.js上で実行されるプログラムなので、利用環境に合わせてNode.jsとnpmがインストールされている必要がある。ここではNode.jsがすでにインストールされているものとして説明する。

まだNode.jsがインストールされていない場合は、次のページを参考に先にインストールする。

Node.js | Node.js使用準備

プロジェクトフォルダの作成

Node.jsがインストールされているなら、プロジェクト用フォルダを作成して初期化する。ここではプロジェクトフォルダ名をgulp-tutorialとする。

mkdir gulp-tutorial
cd gulp-tutorial
npm init

途中でいくつか設定を聞かれるが、そのまま順番にEnterを押してもよい。

gulpのインストール

gulpをインストールするには、Node.jsのnpmというパッケージ管理システムを使う。

gulpには、どこからでも使えるグローバルインストールと、指定ディレクトリ配下だけで使うローカルインストールがある。

グローバルインストール

まずgulpをグローバルインストールする。

npm install gulp -g

インストール後はバージョンを確認する。

% gulp --version
CLI version: 2.3.0
Local version: Unknown

ローカルインストール

gulpをローカルインストールするには、作業ディレクトリでコマンドを実行する。ここではgulp-tutorialディレクトリにいるものとする。

npm install gulp --save-dev

インストールできたらバージョンを確認する。Local versionが表示されれば正しくインストールされている。

% gulp --version
CLI version: 2.3.0
Local version: 4.0.2

プラグインのインストール

Gulpだけでは何もできないため、続いてプラグインをインストールする。ここではCSSをminifyするgulp-cssminと、名前を変更するgulp-renameをインストールする。

npm install --save-dev gulp-cssmin gulp-rename

これでインストール作業は完了である。

設定ファイルの作成

プロジェクトの最上位ディレクトリにgulpfile.jsを作成し、自動化する処理を書く。

var gulp = require('gulp');
var cssmin = require('gulp-cssmin');
var rename = require('gulp-rename');

gulp.task('cssminify', async function () {
  gulp.src('style.css')
  .pipe(cssmin())
  .pipe(rename({suffix: '.min'}))
  .pipe(gulp.dest('.'));
});

Gulpのタスクはパイプラインのように上から下へ流れるように書くため、何をしているか分かりやすい。

CSSファイルの作成

次に処理対象となるCSSファイルを作成する。ファイル名はstyle.cssとし、次の簡単なCSSを書く。

.content {
  width: 100%;
  height: 200px;
  padding: 5px 10px 5px 10px;
}

Gulpタスクの実行

CSSファイルを作成したら、Gulpを呼び出してタスクを実行する。gulpfile.jsでタスク名をcssminifyにしたので、次のように実行する。

gulp cssminify

プロジェクトディレクトリを確認すると、minifyされたstyle.min.cssが生成され、内容は空白なしに圧縮されている。

% cat style.min.css
.content{width:100%;height:200px;padding:5px 10px}%

自動実行されるタスクの作成

毎回手動でコマンドを実行するのは面倒なので、CSSファイルの変更を監視して自動実行するタスクを作る。

gulpfile.jsに次の設定を追加する。

gulp.task('watch', function() {
    gulp.watch('style.css', gulp.series('cssminify'));
});

このwatchタスクは指定ファイルを監視し、変更があると指定タスクを実行する。

gulp watch

ファイル監視が始まり、CSSファイルを変更して保存するたびにタスクが実行され、style.min.cssが更新される。

まとめ

Gulpの便利さを簡単に見てきた。Gulpでは今回扱ったCSSのminify以外にも、さまざまな作業を自動化できる。多くの機能がプラグインとして公開されているため、開発作業に合うプラグインを探して自動化してみるとよい。毎日少しずつ時間を節約できれば、長期的には大きな時間削減になる。Gulpを使ってWeb開発作業を高速化しよう。