2015年3月17日火曜日

gulpでファイルの追加・削除をwatchするふたつの方法

某データベースサイトの構築をしていて、ローカールサーバーを建てるとか*.scssの更新チェックとかをまとめたくてたどり着いたのがgulp.js
便利便利と使っていたが、ファイルを追加した時に更新されなかった。再起動すると追加したファイルが監視対象になったので、起動時のファイルしか対象にならないのかなぁと一瞬思ったが、そんなわけない。
検索してみると色々あったが、とりあえず結論のまとめ。

gulp.js内蔵watchを使う

場合、

var gulp = require('gulp');
//
gulp.task('default', [..., 'watch']);
//
gulp.task('watch', function(){
    gulp.watch(path, 'your_task');
});

のpathの頭に./を付けてはいけない。例えばjs/下のjsファイルを監視する場合、

//correct
  gulp.watch('js/*.js', 'your_task');
//wrong
  gulp.watch('./js/*.js', 'your_task');

こんな感じ。

gulp-watchを使う

場合、

var gulp = require('gulp');
var watch = require('gulp-watch');
//
gulp.task('default', [..., 'watch']);
//
gulp.task('watch', function(){
  watch(path, function() {
    gulp.start('your_task');
  });
});

こんな感じ。少し長くなる代わりに./の有無に関わらずファイルの監視が正しく行われる。

いずれ更新されるだろうが、今のところこんな感じ。