便利なGruntの弱点を補うgulp.jsのインストールと使い方：gulp.jsで始めるWeb開発爆速自動化入門（3/3 ページ）

[中村修太，クラスメソッド]

いくつかのタスクを定義した実用的なgulpfile.jsのサンプル

　代表的なAPIについても解説したので、もう少し実用的なサンプルを作成してみましょう。先ほど作成したgulpfile.jsを下記のように記述します。

'use strict';
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var less = require('gulp-less');
var autoprefix = require('gulp-autoprefixer');
 
 
//1.jsファイルをminify
gulp.task("uglify", function() {
    return gulp.src('./src/js/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest("dest/js"));
});
 
//2.lessをコンパイルし、ベンダープレフィックスを付ける
gulp.task('less', function () {
  return gulp.src('./src/less/**/*.less')
          .pipe(less())
          .pipe(autoprefix("last 1 version", 
            "> 1%", "ie 8", "ie 7", { cascade: true }))
          .pipe(gulp.dest('./dest/css'));
});
 
//3.LESSとjsの変更監視
gulp.task("watch", function() {
    //LESSファイルの変更監視
    gulp.watch('./src/less/**/*.less', function(event) {
        gulp.run('less');
    });
    //jsファイルの変更監視
    gulp.watch('./src/js/**/*.js', function(event) {
        gulp.run('uglify');
    });
});
 
gulp.task('default', ['less','uglify','watch']);

　このgulpfile.jsでは、3つのタスクを定義しています。

• 【1】jsファイルのminify

　uglifyタスクでは、gulp-uglifyモジュールを使用してjsのminifyを行っています。pipe関数を使用して入力からuglify、出力をつなげています。

• 【2】lessファイルのコンパイル＋ベンダープレフィックスの付与

　lessタスクでは、gulp-lessモジュールでlessファイルのコンパイルを行います。

　さらに生成されたCSSに対して、gulp-autoprefixerでベンダープレフィックスを付与しています。

　やっていることは多少複雑になっていますが、このタスクもpipe関数を使用して入力から出力まで処理をつなげており、シンプルに記述できています。

• 【3】LESSファイルとjsファイルの監視

　watchタスクでは、LESSファルとjsファイル、それぞれ対象のファイルが変更されたタイミングでless／uglifyタスクが実行されるように定義しています。

　watch関数では第1引数に対象となるファイルのパスを指定し、第2引数の関数で対象のファイルが変更された際の処理内容を記述しています。

　最後にdefaultタスクとして、less、uglify、watchを実行するように定義しています。

　次に「src/less」ディレクトリと「src/js」ディレクトリを作成し、そこにlessファイルとjsファイルをそれぞれ作成してください。

　サンプルファイルを作成したら、必要なモジュールをインストールし、タスクを実行してみましょう。

//必要なモジュールのインストール
% npm install gulp-uglify gulp-less gulp-autoprefixer
//gulp実行
% gulp //gulp less uglify watchでも可
[23:29:30] Using gulpfile path/your/gulp-project/gulpfile.js
[23:29:30] Starting 'less'...
[23:29:30] Starting 'uglify'...
[23:29:30] Starting 'watch'...
[23:29:30] Finished 'watch' after 7.1 ms
[23:29:30] Finished 'uglify' after 96 ms
[23:29:30] Finished 'less' after 103 ms
[23:29:30] Starting 'default'...
[23:29:30] Finished 'default' after 6.24 μ s

　タスクを実行すると、「src」以下にある既存のlessファイルとjsファイルが「dest」以下に出力されます。

　また、watchタスクにより監視されているので、lessファイルとjsファイルを変更すると、その時点でタスクが実行されます。

Gruntだけではなく、gulp.jsも試してみよう

　今回はgulpの基本的な説明や動きを確認してみました。Node.js上で動くビルドツールであり、シンプルな手続き型スタイルでタスクを定義していくため、理解しやすく簡単に使えるようになると思います。

　Gruntほどではありませんが、プラグインも多く公開されており、基本的なものはそろっているでしょう。

　これからビルドツールを使い始める人や、「Gruntはちょっと重いので、もっと手軽にビルドツールを使いたい」と思っている人は、gulpを試してみてはいかがでしょうか。

著者プロフィール

中村修太（なかむら しゅうた）

クラスメソッド勤務の新しもの好きプログラマです。昨年、東京から山口県に引っ越し、現在はノマドワーカーとして働いています。好きなJazzを聴きながらプログラミングするのが大好きです。