pirosikick's diary

君のハートにunshift

gulpfile.es6でgulp.watchが動かない

JavaScript

上記の記事を参考にgulpfileもES6で書けるようにした。が、watchが何故か動かなかった。

// gulpfile.js
require('babel/register');
require('./gulpfile.es6');

// gulpfile.es6
import gulp from 'gulp';

gulp.task('scripts', () => { ... });

gulp.task('watch', () => {
  gulp.watch(['...'], ['scripts']);
});

$ gulp watch
[00:39:17] Using gulpfile ~/src/github.com/toybox/gulpfile.js
[00:39:17] Starting 'watch'...
[00:39:17] 'watch' errored after 622 μs
[00:39:17] TypeError: boolean is not a function
    at Function.isPlainObject (/Users/pirosikick/src/github.com/toybox/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/node_modules/globule/node_modules/lodash/dist/lodash.js:1652:64)
    at Object.globule.find (/Users/pirosikick/src/github.com/toybox/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/node_modules/globule/lib/globule.js:64:19)
    at Gaze.add (/Users/pirosikick/src/github.com/toybox/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/gaze.js:174:19)
    at new Gaze (/Users/pirosikick/src/github.com/toybox/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/gaze.js:74:10)
    at gaze (/Users/pirosikick/src/github.com/toybox/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/gaze.js:86:10)
    at Object.module.exports [as watch] (/Users/pirosikick/src/github.com/toybox/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/index.js:12:17)
    at Gulp.watch (/Users/pirosikick/src/github.com/toybox/node_modules/gulp/index.js:35:16)
    at Gulp.<anonymous> (/Users/pirosikick/src/github.com/toybox/gulpfile.es6:11:8)
    at module.exports (/Users/pirosikick/src/github.com/toybox/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/Users/pirosikick/src/github.com/toybox/node_modules/gulp/node_modules/orchestrator/index.js:273:3)

エラーでググるとbabelにIssueが立っていた。

6to5-node breaks gulp watch · Issue #489 · babel/babel · GitHub

babelが原因ではなく、gulpが依存しているvinyl-fsが依存しているglob-watcherが依存しているgazeが依存しているglobuleが依存しているlodashのバージョンが古いのが原因らしい。。。glob-watcherが参照しているgazeのバージョンが上がればいいっぽいが、待てないので、上記Issueのコメントに書いてあった方法で凌ぐ。

$ npm i --save lodash

$ cd node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/node_modules/globule
$ vim package.json
... lodashをdependenciesから削除

// 古いlodashを消す
$ rm -r node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/node_modules/globule/node_modules/lodash

これでうまくいった！！npm scriptsのpostinstallに書いておけば上記手順は勝手にやってくれる（結構微妙な対応だけど。。。）

  "scripts": {
    "postinstall": "pushd node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/node_modules/globule; perl -pi -e 's/\"lodash\".*,$//' package.json; rm -r node_modules/lodash; popd"
  }

長い！！！早く根本的に解決して欲しい。。。