gulp.jsでjekyll serve -wとcompass watchさせたいメモ

そもそもGrunt.jsも使ったことなかった状態でgulp.js使うことになったので、gulp.jsの理解からはじまる……けど、そのへんは割愛。

導入についてはこの辺を参考。
http://qiita.com/svartalfheim/items/b586b6772ffa93934a88
http://qiita.com/macococo/items/9f8b9329263783e4673a

$compass watchはすでにプラグインがあったので、gulp-compassを利用。
問題はjekyllの仮想サーバー起動とファイル監視。
既存のプラグインがbuildはやってくれるけど、serveとwatchまでやってくれないので、他にプラグインないかなぁと探し回ったけどやっぱりなくて……ggってもgruntのプラグインとか自力でプラグイン的なものを作って実行してるっていう記事ばっかりで、本職の方に比べたらフロント初心者みたいな自分にはなかなかハードル高め。

とにかく$jekyll serve -wを実行してくれれば何でもよかったので、結局gulp.jsでコマンドラインを叩くっていう方法でやることにした。

gilpfile.js

var gulp    = require('gulp');
var compass = require('gulp-compass');
var gutil   = require('gulp-util');
var exec    = require('child_process').exec;　//gulpでコマンドラインを叩くようするるおまじない

//compass compile
gulp.task('compass', function() {
  gulp.src('./_source/sass/*.scss')
  .pipe(compass({
    config_file: './config.rb',
    css:         './_source/stylesheets',
    sass:        './_source/sass'
  }))
  .pipe(gulp.dest('./_source/stylesheets'));
});

// jekyll build
gulp.task('jekyll',function(){
  exec('jekyll serve -w');
});

// ファイル監視
gulp.task('watch', function(){
    gulp.watch('./_source/sass/*.scss',['compass']);//scssに変更あったらtaskのcompassが走る
});

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

正直、このやり方がスマートな方法なのかはちょっとわからないけど、ひとまず備忘録として。
もっとスマートな方法があったら教えてほしい所存。
gulp-shellとかあるけどどうなんだろう……。

参考

gulp.jsの公式ドキュメント