私はgulp + browserifyを使用して、javascriptライブラリをビルドおよびパッケージ化しています。気になることが1つあります。gulpを介した開発のために、livereloadを使用した単純なサーバーを実行しています。これは正常に動作しますが、JavaScriptに構文エラーが含まれている場合は常に、browserifyがエラーをスローしてサーバーを停止させます。
私が使用するbrowserifyコード(エラーハンドラーを追加したことに注意してください):
browserify("./src/main.js")
.bundle({standalone: "SomeName", debug: false}).on('error', notify.onError({
message: "Error: <%= error.message %>",
title: "Failed running browserify"
})
);
興味深い部分が来ました:スタンドアロン設定を削除すると(そして私のjsが構文的に正しくない場合)、エラーハンドラーが起動します。ただし、このスタンドアロン設定を使用すると、エラーハンドラーが起動しません(サーバーがgulp停止によって起動されます)。
誰かがこの問題に対処する方法を知っていますか?私はいつでもgulpでjsファイルを手動で検証できますが、この回避策は避けたいです
on('error')
イベントは引き続き発生します。ただし、browserifyストリームは他のGulpストリームとは少し異なります。 browserifyのエラーハンドラー関数では、this.emit("end")
を明示的に呼び出す必要があります
Gulpタスクの例
_var browserify = require('browserify');
var gulp = require('gulp');
var source = require("vinyl-source-stream");
var reactify = require('reactify');
gulp.task('browserify', function(){
// create new bundle
var b = browserify();
// add transform if you want
b.transform(reactify);
// add file to browserify
b.add("./src/main.js");
// start bundling
return b.bundle()
.on('error', function(err){
// print the error (can replace with gulp-util)
console.log(err.message);
// end this stream
this.emit('end');
})
.pipe(source('main.js'))
// pipe other plugin here if you want
.pipe(gulp.dest('./dist'));
});
_
エラー関数ハンドラはgulpのクラッシュを防ぎ、this.emit("end")
は現在のストリームを停止し、次のパイプに実行させません。イベントハンドラーは、変換プラグインでエラーをキャッチすることもできます。
詳細については、こちらをご覧ください http://truongtx.me/2014/07/15/handle-errors-while-using-gulp-watch/
誰も答えを投稿しなかったので(より良い解決策があれば、遠慮なく修正してください!)、ユースケースを機能させるために追加した回避策を次に示します。計画されているGulpバージョン(v4)がエラー処理をより適切にサポートし、この問題を解決する可能性があることを理解しました。ただし、ここでは jsバリデーター を使用します
var jsValidate = require('gulp-jsvalidate');
var notify = require("gulp-notify");
gulp.task('browserify', function() {
gulp.src("./src/*.js").pipe(jsValidate()).on('error', notify.onError({
message: "Error: <%= error.message %>",
title: "Failed running browserify"
})).on('finish', function(){
browserify("./src/main.js")
.bundle({standalone: "SomeName", debug: true}).on('error', notify.onError({
message: "Error: <%= error.message %>",
title: "Failed running browserify"
}))
.pipe(source('output.js'))
});
});
まあ、browserifyでgulpファイルを監視し続ける解決策が見つからなかったので、これを解決します
var exec = require('child_process').exec;
var fs = require('fs');
//watching changes from watchFile command
fs.watchFile('prim.js',[ { interval: 100 }] , function (curr, prev) {
//running cli command on change
exec('powershell.exe -Command "browserify prim.js -o main.js"', function(err, stdout, stderr) {
console.log(stdout);
})
.stdin.end();
});
現在のフォルダーにhelper.js(必要に応じて名前を付け)ファイルを追加し、パスを設定して、CLI
からノードでそのファイルを実行するだけです。グローバルにインストールしている場合は、browserifyをローカルにインストールする必要はありません。お役に立てれば。
バンドルエラーの場合にgulpタスクがクラッシュするのを防ぐコードは次のとおりです。 @tmtxtが投稿したコードを少し変更したバージョンです。彼のバージョンで私が抱えていた問題は、最初の障害が発生した後、「gulp.watch」が更新を停止することでした。
var browserify = require('browserify');
var gulp = require('gulp');
var source = require("vinyl-source-stream");
gulp.task('browserify', function () {
browserify(paths.src.client.app)
.bundle()
.on('error', function(err){
console.log(err.message);
})
.pipe(source(paths.dest.client.bundle))
.pipe(gulp.dest(paths.dest.client.scripts));
});
gulp.task('watch-browserify', function () {
gulp.watch([paths.src.client.scripts], ['browserify'])
});
Gulpをクラッシュさせず、browserify変換がクラッシュしても監視/配信を続行するソリューションを探したところ、ようやく見つかりました。私はそれについて小さなブログ投稿を書きました:
http://latviancoder.com/story/error-handling-browserify-gulp