gulp で CoffeeScript と Stylus をコンパイルする。

CoffeeScript と Stylus で作ったWebアプリケーションを gulp でビルドしてみました。

環境

  • Mac OS X 10.9.2
  • Node.js 0.10.26
  • express 3.4.8

準備

前提として、node と express が入っていること。それに加えて、CoffeeScript と gulp をインストールしておきます。

$ npm install -g coffee-script
$ npm install -g gulp

ビルド用のモジュールは --save-dev オプションをつけると、package.json の devDependencies の項目に設定され、開発環境でのみインストールするようになります。

$ npm install --save-dev gulp
$ npm install --save-dev gulp-coffee
$ npm install --save-dev gulp-stylus

運用環境では --production オプションをつけて、devDependencies のものをはインストールしないようにします。開発環境の時は特にオプションは必要ありません。

$ npm install --production

gulpfile.js

gulpfile.js にビルドのタスクを記述していきます。以下のタスクでは CoffeeScript のファイルを JavaScript にコンパイルして書き出しています。

var gulp = require('gulp');
var coffee = require('gulp-coffee');
var stylus = require('gulp-stylus);

gulp.task('coffee', function(){
    gulp.src('./src/coffee/*.coffee')
        .pipe(coffee())
        .pipe(gulp.dest('./public/javascripts'))
});

gulp.task('stylus', function(){
    gulp.src('./src/stylus/*.styl')
        .pipe(stylus())
        .pipe(gulp.dest('./public/stylesheets'))
});

gulp.task('default', function(){
    gulp.run('coffee', 'stylus');
});

ビルドの実行

引数に何も指定しない場合は、default のタスクが実行されます。

$ gulp

引数にタスク名を指定することで、そのタスクのみ実行することも可能です。

$ gulp coffee

gulpfile.coffee

実は、gulpfile.js 自体も CoffeeScript で記述することが出来ます!

まずは CoffeeScript をインストール。

$ npm install --save-dev coffee-script

gulpfile.coffee を作成します。先ほどの gulpfile.js を CoffeeScript で以下に記述してみました。()が省略出来る分、ビルドファイルの文量も少なくなりそうですね。

gulp = require('gulp')
coffee = require('gulp-coffee')
stylus = require('gulp-stylus)

gulp.task 'coffee', ->
    gulp.src './src/coffee/*.coffee'
        .pipe coffee()
        .pipe gulp.dest './public/javascripts'

gulp.task 'stylus', ->
    gulp.src './src/stylus/*.styl'
        .pipe stylus()
        .pipe gulp.dest './public/stylesheets'

gulp.task 'default', ->
    gulp.run 'coffee', 'stylus'

ビルドの実行

--require オプションで coffee-script/register を指定することで、gulpfile.coffee のビルドが開始されます。

gulp --require coffee-script/register

まとめ

実際にビルドが出来るexampleも作ってみました。GitHub

このexampleでは、src配下においた CoffeeScript と Stylus の各ファイルを、 検証環境用は ./public, 本番環境用は ./build にビルドするようにしています。また、app.js, routes/index.js もCoffeeScriptで書いてそれぞれビルドしています。

grunt は JSON のようなフォーマットでタスクを記述しますが、gulp の場合は js そのまま。.pipe のチェーンメソッドで処理をつなげていく形でわかりやすいので個人的には gulp の方が好きですね。