この前の記事では Grunt と grunt-usemin によるビルドを試したが、今回はこれの gulp 版となる gulp-usemin を利用してみる。ツールの使い方は以下の記事を参考にした。

• gulp/README.md
• gulp-usemin
• gulp.jsで始めるWeb開発爆速自動化入門：便利なGruntの弱点を補うgulp.jsのインストールと使い方

プロジェクトのファイル構成

前回記事の構成を流用する。ルート直下に npm と Bower の設定ファイル、そして今回の gulp 用ファイルを配置し、src を開発用とする。gulp によるビルドを実行すると dist に成果物が出力される。

/
├ package.json
├ bower.json
├ gulpfile.js
│
└ bower_components/
│  └ ライブラリ
│
└ node_modules/
│  └ node.js パッケージ
│
└ src/
   ├ index.html
   ├ page-1.html
   ├ page-2.html
   ├ css
   │  └ style.css
   ├ js
   │  └ main.js
   └ img
      ├ logo.png
      └ background.png

gulpfile.js

Grunt と同様に gulp によるビルド処理は JavaScript または CoffeeScript で実装。ファイル名は gulpfile.js となる。

Grunt のビルドは grunt.initConfig に設定を定義して grunt.registerTask に登録したタスクから参照するスタイルだった。宣言的に設定を書くという思想があるのかもしれないが、この記法だと設定が増えてきたときタスクとの距離が遠くなる。設定を変数にくくり出すなどして整理しないと見通しにくい。

gulp の場合、設定ではなく処理を直接記述するような感じになる。The streaming build system と銘打つとおりファイルやフォルダをストリームとして扱い、その途中に処理を挟みこんでゆく。処理間は pipe で結ばれ。...という認識なのだが誤解してるかも。

では実際に使ってみよう。npm init と bower init は済んでいるものとして、まずはグローバルに gulp をインストール。

$ npm install -g gulp

次にプロジェクトのルートでビルドに利用するパッケージをインストール。Grunt の時と同様に --save-dev オプションを付けて package.json へ記録。

$ npm install --save-dev gulp
$ npm install --save-dev gulp-concat
$ npm install --save-dev gulp-minify-css
$ npm install --save-dev gulp-uglify
$ npm install --save-dev gulp-usemin
$ npm install --save-dev gulp-watch
$ npm install --save-dev rimraf

これらを利用して Grunt の時に実装した処理を移植すると以下のようになる。

var gulp      = require( 'gulp' );
var uglify    = require( 'gulp-uglify' );
var minifyCSS = require( 'gulp-minify-css' );
var usemin    = require( 'gulp-usemin' );
var rimraf    = require( 'rimraf' );

gulp.task( 'clean', function( cb ) {
    rimraf( 'dist', cb );
} );

gulp.task( 'build', [ 'clean' ], function() {
    gulp.src( 'src/img/**'  ).pipe( gulp.dest( 'dist/img'  ) );

    gulp.src( 'src/**/*.html' )
        .pipe( usemin( {
            css: [ minifyCSS() ],
            js:[ uglify() ]
        } ) )
        .pipe( gulp.dest( 'dist' ) );
} );

gulp.task( 'watch', function( cb ) {
    gulp.watch( [ 'src/js/*.js', 'src/css/*.css' ], [ 'build' ] );
} );

gulp.task( 'default', [ 'watch' ] );

gulp.src で入力をとり pipe でストリームの連結と割り込み処理が実行されてゆく。pipe で gulp.dest を実行するとその時点のストリームが出力される。

今回の gulp-usemin だと入力が HTML になる。HTML のストリームから usemin が処理対象となる build:css や build:js とコメントされた区分を見つけその中を結合。Minify して HTML の参照を書き換える。最後に grunt.dest によって処理結果が dist へ出力される。

ビルドを実行する場合、今回のタスクだと build を利用する。プロジェクトのルートで以下を実行すると Grunt の時と同様の結果が dist フォルダに出力されるはず。

$ gulp build

個人的には gulp の方が Grunt に比べてビルド処理の結果を予測しやすくて好みだ。ビルドで頻出する src/dest の概念が組み込みという点も気に入った。

サンプル

今回の記事で作成したプロジェクトをサンプルとして GitHub に公開してみた。

• examples-web-app/gulp-usemin

clone して README.md の Installation に書かれた手順を実行すると gulp-usemin によるビルドを試せる。