gulpfile.js はタスクのレシピ
gulp.jsのタスクは、gulpfile.jsというファイルに書きます。これを加えて、フォルダの全体像はこうなりました。
gulpfile.jsの中身は、次のような素のJavaScriptです。ただし、Node.js初めてという場合、冒頭の記述が見慣れないかもしれません。require()は別ファイルやモジュールのJavaScriptを読み込む仕組みです。package.jsonで指定したnpm install済みのモジュールを、ここで読み込んで使えるわけです。
var gulp = require('gulp');
var cssimport = require('gulp-cssimport');
var autoprefixer = require('gulp-autoprefixer');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
gulp.task('style', function(){
return gulp.src('src/style.css')
.pipe(cssimport())
.pipe(autoprefixer('last 2 versions'))
.pipe(minifyCss())
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('dist/'));
});
gulpfile.jsの後半を詳しく見る前に、ひとまずターミナルから次のコマンドを実行してみましょう。
$ gulp style
正しく実行されれば、dist/フォルダにstyle.min.cssというファイルができたはずです。続いて、gulpfile.jsの内容を見ていきましょう。
gulp.task(<タスク名>, <関数>)
タスクの指定はこの関数を使います。タスク名はコマンドラインから指定するため、スペースを含めることができませんが、それ以外は比較的自由です。アルファベットに限らず、漢字で「整形と圧縮」とかでも構いません。
gulp.task(<タスク名>, [<依存タスク名>,...], <関数>)の形で書くこともでき、この場合は依存タスクを先に実行してから、タスクの本体が実行されます。例えば、「"deploy"は、必ず"coffee"と"css"してから」といった具合です（参照►公式ドキュメント）。
gulp.src(<ファイル指定>)
対象ファイルの指定には、glob文字列を使います。よく使うのは次のパターンなどで、これらの配列でもOKです。
| globの例 | 意味 |
|---|---|
'src/style.css' |
ファイル名そのもの |
'src/*.css' |
拡張子が.cssで、srcフォルダ直下 |
'src/**/*.css' |
拡張子が.cssで、srcフォルダとそのサブフォルダ内 |
'!src/not-me.css' |
not-me.cssは除外 |
なお、パスはプロジェクトフォルダのルート（root）からの相対パスで指定します（参照►公式ドキュメント）
gulp.dest(<出力パス>)
gulp.srcと同様に、相対パスで出力先フォルダを指定します。/Users/osscafe/my-project/がプロジェクトフォルダだとすると、下記のようになります。
| 指定パス | 実際のパス |
|---|---|
例. './' |
/Users/osscafe/my-project/ |
例. 'dist/' |
/Users/osscafe/my-project/dist/ |
.pipe(<関数>)
gulp.srcやプラグインは、必ずstream（またはbuffer）を返します。pipeはUnixでいうところの|と同じで、文字どおり、前のコマンドの結果を次のコマンドにつなげます。
例えば、.pipe(rename({ extname: '.min.css' }))とあるのは、「『拡張子を.min.cssに』というオプションを付けて、renameプラグインにパイプする」と読めます。オプションの詳細については、各プラグインのページを参照してください（参照►gulp-rename）。
gulp.watchで自動実行
最後に一点、ファイルの監視についても触れておきましょう。先ほどのgulpfile.jsに、次のブロックを書き足します。
gulp.task('watch', function() {
gulp.watch(['src/*.css'], ['style']);
});
その上で、gulp watchコマンドを実行しておけば、ファイルを保存するたびに自動的にコンパイルされ、コマンドをいちいち打つ必要がなくなります（参照►公式ドキュメント）
次回予告
gulp.jsと同様のツールとして、「Grunt」も人気です。3年前からの開発が進められているので、おそらくこの記事の読者にも使っている方は多いのではないかと思います。筆者自身、Gruntからgulp.jsに移行したユーザです。Gruntとgulp.jsの大きな違いは、
- 処理をつなげられるかどうか、
- ロジックを含められるかどうか
にあります。連載の次回ではこのあたりについて紹介しつつ、gulp.jsの大きな魅力の一つである「速さ」の秘密に迫りたいと思います。
