Kousei Ikeda/Blog

2014.06.02/Development

一部で流行の兆しのあるgulp.jsを試した。
gruntのjsonぽい感じでなくて手続き型で書けるらしい。つまり普通にプログラムで書くと。メソッドチェーンでつなげてく。みたい。

HelloWorldな目標設定として
*.coffeeを更新したらcoffeelintしてcoffeeしてuglifyしてjsディレクトリに書き出してlivereloadしてみる。
とはいえこの程度だとCodekit使うけど。(CodeKitでcoffeelintはできないけど)

初回セットアップ

$ sudo npm install -g gulp

プロジェクト毎セットアップ

$ npm init
$ npm install --save-dev gulp
$ npm install --save-dev gulp-coffeelint gulp-coffee gulp-uglify gulp-connect
$ touch gulpfile.coffee

gulpfile.coffee書く

gulp=require 'gulp'
coffee=require 'gulp-coffee'
coffeelint=require 'gulp-coffeelint'
uglify=require 'gulp-uglify'
connect=require 'gulp-connect'

gulp.task 'coffee',->
    gulp.src 'src/coffee/**/*.coffee'
        .pipe do coffeelint
        .pipe do coffeelint.reporter
        .pipe do coffee
        .pipe do uglify
        .pipe gulp.dest 'src/js/'
        .pipe do connect.reload
    return

gulp.task "connect", ->
    connect.server
        root: "src"
        livereload: true
    return

gulp.task "watch", ->
    gulp.watch ["src/content/coffee/**/*.coffee"], ['coffee']
    return

gulp.task "default", ["connect","watch"]

gulpでwatch開始

$ gulp

あとはgulp-connectがデフォルトポート8080だからlocalhost:8080をブラウザで開いてChromeExtensionのLiveReloadをオンにする(勝手になる?)。
タスクの流れの書き方(Streamて言うとか)が書きやすくて良い気がする。

ただまだこれだとcoffeelintでエラーの時でも後のタスクが実行されちゃうから、そのあたりもっと正しい書き方があるように思う。