gulpはgulpfile.jsに含まれているjshintを使ってもエラーでサーバーを停止します

Question

私のgulpfileにjshintがあるにもかかわらず、私のjsファイルにエラーが発生したときにサーバーがなぜ停止するのかわかりません。私はjshintをインストールし、jsファイルのエラーを報告するためプロジェクトにインクルードしましたが、まだ失敗しています。これをどうすれば解決できますか？

gulp.task('scripts',() => { 
    return gulp.src('assets/js/src/*.js') 
     .pipe(jshint()) 
     .pipe(jshint.reporter('jshint-stylish', {beep: true})) 
     .pipe(concat('main.js')) 
     .pipe(gulp.dest('assets/js/build/')) 
     .pipe(uglify()) 
     .pipe(gulp.dest('assets/js/')) 
     .pipe(browserSync.stream({stream: true})); 
}); 

Answer 1

gulp-jshint JavaScriptファイルのエラーを報告します。それ以上のものはありません。 uglify()（JavaScriptファイルにエラーがある場合にはサーバーを停止させ、サーバーを停止させる）のような後のパイプステージに障害のあるJavaScriptファイルが到達することを防ぎません。

gulp.task('jshint',() => { 
    return gulp.src('assets/js/src/*.js') 
     .pipe(jshint()) 
     .pipe(jshint.reporter('jshint-stylish', {beep: true})) 
     .pipe(jshint.reporter('fail')) 
}); 

は、その後、あなたのscriptsを行う必要があります。ご使用のサーバーを台無しから欠陥JavaScriptファイルを防ぎたい場合は

、あなたはそれ自身のタスクにすべてのjshintものを入れて、タスクfails when any JavaScript file has an errorことを確認する必要がありますjshintタスクが成功したとき

gulp.task('scripts', ['jshint'],() => { 
    return gulp.src('assets/js/src/*.js') 
     .pipe(concat('main.js')) 
     .pipe(gulp.dest('assets/js/build/')) 
     .pipe(uglify()) 
     .pipe(gulp.dest('assets/js/')) 
     .pipe(browserSync.stream({stream: true})); 
}); 

今すぐあなたのscriptsタスクのみを実行します：タスクは、そのjshintタスクに依存します。いずれかのJavaScriptファイルに欠陥があった場合、jshintは、サーバーがJavaScriptの最後の正常なバージョンを使用して実行している間、エラーをコンソールに出力します。

Answer 2

最も簡単な修正はもう少し優雅にエラーを処理するためにゴクゴク-配管工を使用することです。それが更新されてから縮小さのファイルを防ぐことができますので、個人的に

var plumber = require("gulp-plumber"); 

gulp.task('scripts',() => { 
    return gulp.src('assets/js/src/*.js') 
     .pipe(plumber()) 
     .pipe(jshint()) 
     .pipe(jshint.reporter('jshint-stylish', {beep: true})) 
     .pipe(concat('main.js')) 
     .pipe(gulp.dest('assets/js/build/')) 
     .pipe(uglify()) 
     .pipe(gulp.dest('assets/js/')) 
     .pipe(browserSync.stream({stream: true})); 
}); 

が、私はそのソリューションを好きではありません。ここに私がお勧めするものがあります：

var jshintSuccess = function (file) { 
    return file.jshint.success; 
} 

gulp.task('scripts',() => { 
    return gulp.src('assets/js/src/*.js') 
     .pipe(sourcemaps.init()) 
     .pipe(jshint()) 
     .pipe(jshint.reporter('jshint-stylish', { 
      beep: true 
     })) 
     .pipe(gulpif(jshintSuccess, uglify())) 
     .pipe(concat('main.js')) 
     .pipe(sourcemaps.write('maps')) 
     .pipe(gulp.dest('assets/js/')) 
     .pipe(browserSync.stream({ 
      stream: true 
     })); 
}); 

まず、私は複数の宛先に書きません。代わりに、私はソースマップを使用していますので、あなたは未使用コードを必要としません。第二に、条件付きでjshintの結果に基づいてコードをuglifyでパイプする場合、gulp-ifを使用しています。エラーのあるコードはuglifyをバイパスするので、依然としてあなたの目的地のファイルに書き込まれます。

これで、開発者用ツールを使って検査してデバッグすることができます。

注：私はこれはローカル開発用です。私はこれを連続的な統合パイプラインに結びつけません。なぜなら、あなたは良いコードを生産にしたいからです。そのために別のタスクを設定するか、別のgulp-if条件を追加して、壊れたコードが環境変数に基づいて構築されないようにします。