Gruntに代わるタスクランナー gulp を試してみた所、gulp.watch の挙動ではまった点があったのでメモしておきます。
ちなみに動作環境は以下のとおりです。
- Windows 7 (64bit)
- node.js: ver 0.10.24
- gulp.js: ver 3.8.7
監視対象がひとつでも存在している必要がある
gulp.watch で監視するパターン(glob)にマッチするファイルが1つでも存在しないと、監視そのものが上手く動作しない様です。
var gulp = require('gulp');
gulp.task('watch', function (callback) {
var path = "../scss/main.scss"
gulp.watch(path, function (e) {
// added, changed or deleted のどれかが発生するはず
console.log(e.type)
}
}
こんなスクリプトを書いても $ gulp watch してタスクを開始した時点で ../scss/main.scss が存在しないと、監視イベントが発生しないようです。
上記の場合、../scss/ フォルダに main.scssを後から追加すると e.type=added なイベントが発生しても良さそうなのですがダメでした。
var gulp = require('gulp');
gulp.task('watch', function (callback) {
var path = "../scss/*.scss"
gulp.watch(path, function (e) {
// added, changed or deleted のどれかが発生するはず
console.log(e.type)
// 何らかの変更があった対象ファイルの絶対パス
console.log(e.path)
}
}
こんな感じでワイルドーカードを使った場合でも ../scss/*.scss に該当するファイルが1個も無ければ、同じく監視イベントが発生しません。
ですが、1個でも該当するファイルがあれば監視は正常に動作します。
たとえば、../scss/main.scss が始めから存在していれば、 後から ../scss/sub.scss を入れてもちゃんと e.type=added で反応しました。
基本的にgulpで完結するルーチンなら問題なさそうな気もしますが、他のツールが特定のフォルダにファイルを置くので、それを監視したい場合には要注意かと思います。
監視イベントオブジェクトのパスは Windows 形式
Windows限定の話だと思いますが、gulp.watch(glob[, opts, cb]) のシグネチャで呼び出した場合にコールバック関数の引数に含まれるパスは『\(円マーク)』区切りになります。
var gulp = require('gulp');
gulp.task('watch', function (callback) {
var path = "../scss/*.scss"
gulp.watch(path, function (e) {
// 何らかの変更があった対象ファイルの絶対パス
// 例: C:\Users\xxxxx\project\sample\scss\main.scss
console.log(e.path)
}
}
こんな感じで、変更があったファイルの絶対パスが『\(円マーク)』区切りで格納されていますが、プラグインによってはUNIX形式の『/(スラッシュ)』区切りでないと動作しないケースがありました。
var gulp = require('gulp');
var tsc = require('gulp-tsc');
gulp.task('watch', function (callback) {
var path = "../ts/Main.ts"
gulp.watch(path, function (e) {
//gulp.src(e.path)
gulp.src(e.path.replace(/\\/g, "/"))
.pipe(tsc({out: 'main.js'}))
.pipe(gulp.dest("../js/"))
}
}
例として、TypeScriptをコンパイルしてくれるプラグイン gulp-tsc では『\(円マーク)』区切りでは上手く動作しませんでした。
この場合は、replaceで『/(スラッシュ)』区切りに変換する事で問題なく動作させる事ができるかと思います。