Gulpでエラー発生時にwatchを継続したい

Question

Gulpでbrowserifyやbabelifyなどを使ってReactのソースをビルドしているんですが、
対象のJavaScriptファイルに単純な構文エラー(カッコが足りない、JSXの構文ミスなど)が発生すると
gulp.watchが止まってしまいます。

gulp-plumberを使うと継続できる、とか、
.on('error', function(){})でハンドリングできる、など
いくつか対策を見つけたのですが、watchが止まる状況は変わりませんでした。

Gulpの知識が無いので、記述が良くなくて効果が無いだけなのかもしれないのですが、
Gulp+Browserify+babelify+uglify+Reactな環境でエラー発生後もwatchが継続できるように
gulpfile.jsを記述したいです。

gulpfile.js

gulp.task('build', function() {
	return gulp.src('src/js/*.js')
		.pipe(plumber())
		.pipe(through2.obj(function(file, encode, callback){
			browserify(file.path)
				.transform(babelify)
				.bundle(function(err, res){
						file.contents = res;
						callback(null, file)
				})
				.on('error', console.log('error'))
		}))
		.pipe(uglify({preserveComments: 'some'}))
		.pipe(gulp.dest('./build/js/'));
});

  "devDependencies": {
    "babelify": "^6.3.0",
    "browser-sync": "^2.9.6",
    "browserify": "^11.2.0",
    "del": "^2.0.2",
    "gulp": "^3.9.0",
    "gulp-plumber": "^1.0.1",
    "gulp-uglify": "^1.4.1",
    "gulp-watchify": "^0.5.0",
    "react": "^0.13.3",
    "run-sequence": "^1.1.4",
    "through2": "^2.0.0",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0",
    "vinyl-transform": "^1.0.0"
  }

Answer 1

修正すべき箇所は２点です。

• 発生した例外errを適切にcallbackに渡してください。
• errorイベントを追加する場所を、bundle後から、uglify直前にしてください。

以下のようなgulpfile.babel.jsで、監視が継続することをできます。

gulpfile.babel.js

import gulp from 'gulp'
import plumber from 'gulp-plumber'
import through2 from 'through2'
import browserify from 'browserify'
import babelify from 'babelify'
import uglify from 'gulp-uglify'

gulp.task('default',['build','watch'])
gulp.task('watch',()=>{
  return gulp.watch('src/js/*.js',['build'])
})
gulp.task('build',()=>{
  return gulp
  .src('src/js/*.js')
  .pipe(plumber())
  .pipe(through2.obj(function(file,encode,callback){
    browserify(file.path)
    .transform(babelify)
    .bundle(function(err,res){
      if(err){
        return callback(err)
      }
      file.contents = res
      callback(null,file)
    })
  }))
  .on('error',function(error){
    console.log(error.message)
    this.emit('end')
  })
  .pipe(uglify({preserveComments:'some'}))
  .pipe(gulp.dest('./build/js/'))
})

src/js/index.js

import React from 'react'
export default class Component extends React.Component{
  render(){
    // return <div>ok</div>
    return <div>{syntax error!}</div>
  }
}

gulp
# [10:33:46] Requiring external module babel-core/register
# [10:33:46] Using gulpfile ~/Downloads/hoge/gulpfile.babel.js
# [10:33:46] Starting 'build'...
# [10:33:46] Starting 'watch'...
# [10:33:46] Finished 'watch' after 11 ms
# /Users/59naga/Downloads/hoge/src/js/index.js: Unexpected token (5:24) while parsing file: /Users/59naga/Downloads/hoge/src/js/index.js
# [10:33:46] Finished 'build' after 98 ms
# [10:33:46] Starting 'default'...
# [10:33:46] Finished 'default' after 15 μs

参考

For reference, it was the this.emit('end'); that is now needed: - Watch stops on errors (Figure out better error handling) · Issue #259 · gulpjs/gulp

Comments

[notable]

解決できました！
ありがとうございます！！

Answer 2

gulp.watchが止まってしまいます。

これは、gulpコマンドそのものが停止してしまうのでしょうか？
それともgulpコマンドは実行されたままjavascriptファイルを変更してもタスクが実行されなくなる現象でしょうか？

後者の場合、一度、run-sequenceとbrowser-syncが原因で
「JSHintでエラー/ワーニングがあるとjavascriptファイルを変更しても一切タスクが実行されなくなる (watchされなくなる？)」という現象に出遭ったことがあります。
これは、browserSync.reload()に{stream: true, once: true}というオプションを与えることで解決しました。

gulpそのものは止まらないが、jshintなどでエラーがあるとjsファイルのwatchが認識されなくなったパターン

var gulp        = require("gulp"),
    /* 中略 */
    browserSync = require('browser-sync'),
    reload      = browserSync.reload;

// watch で実行されるjavascriptのタスク
gulp.task('js', function(cb) {
  runSequence('jshint', 'js.build', reload);
  // ↑ reloadを指定すると、最後に cb を追加するとエラーになってしまう。
});

// watch
gulp.task('default', function() {
  gulp.watch([devDir + '/js/**/*.js'], ['js']);
});

browserSync.reload()に{stream: true, once: true}というオプションを与えることで解決したパターン

var gulp        = require("gulp"),
    /* 中略 */
    browserSync = require('browser-sync');

// reloadを別タスク化
gulp.task('reload', function() {
  return gulp.src('/')
    .pipe( browserSync.reload({stream: true, once: true}) );
});

// watch で実行されるjavascriptのタスク
gulp.task('js', function(cb) {
  runSequence('jshint', 'js.build', 'reload', cb);
});

// watch
gulp.task('default', function() {
  gulp.watch([devDir + '/js/**/*.js'], ['js']);
});

問題が、gulpコマンドそのものが停止してしまうであると的はずれな回答となりますが、
gulpは実行されたままwatchされなくなっている場合は、この辺りが原因のこともあるかもしれません。

参考: Gulp JSHintでError Warningsが無い時だけ次のタスクを実行してリロードさせたい

Comments

[notable]

ありがとうございます。
現象としては次のようなエラーが表示されてGulpそのものが止まります。

gulp/node_modules/vinyl-fs/node_modules/vinyl/index.js:143
throw new Error('File.contents can only be a Buffer, a Stream, or null.'

run-sequenceやbrowser-syncを使わない状態でも同じでした…

[KiKiKi_KiKi]

notable さん
なるほど、そもそもgulpが止まってしまう問題でしたか...
では、このケースは的はずれでしたね。。。
エラーで検索したら下記のような感じのものもあったので何かしらヒントになるかもしれません。
File.contents can only be a Buffer, a Stream, or null. #1
https://github.com/hurrymaplelad/metalsmith-feed/issues/1

引き続き、僕も調べてみたいと思います！