Lose only if lint passes in Gulp

Question

I am trying to achieve this gulp thread:

It seems like a pretty straightforward process, but from what I can say, it cannot be implemented as a Gulp stream.

I am currently doing this:

gulp.task('js', function () { return browserify('foo/main.js') .bundle() .pipe(source('bundle.js')) .pipe(streamify(jshint())) .pipe(jshint.reporter('default')) // source map, minify, … }); 

The problem is that JSHint should be started first, only in the modified file, and the process should be interrupted if lint does not work. In my setup, Browserify always starts, and only then does JSHint start in the whole package. I can handle the performance penalty, but the JSHint line numbers correspond to the generated set and not to my JS source files, which is a pain.

Answer 1

This is a great idea. I implemented this in my pipeline using watchify, which will use files using the default reporter and use a failure reporter if the file does not pass the lint test. Despite the fact that this is recommended in the question, I personally would avoid doing this, since what you really want is just for your reporter to issue checks, while the development observer was still spawned in the background. Otherwise, you will have to restart the task, which, as a rule, can bite me. Anyway, here is the code:

 'use strict'; var assign = require('object-assign'), gulp = require('gulp'), gutil = require('gulp-util'), merge = require('merge-stream'), jshint = require('gulp-jshint'), source = require('vinyl-source-stream'), watchify = require('watchify'), browserify = require('browserify'); var resources = { mainJS : 'main.js', bundleJS : 'bundle.js', root : 'www' }; function res(r) { return './' + resources[r]; } gulp.task('watch', function() { var bundler = watchify(browserify(res('mainJS'), assign(watchify.args, { fullPaths: false }))); var scripts = function(changedFiles) { var compileStream = bundler .bundle() .on('error', gutil.log.bind(gutil, gutil.colors.red('Browserify Error\n'))) .pipe(source(res('bundleJS'))) .pipe(gulp.dest(res('root'))); if (changedFiles) { var lintStream = gulp.src(changedFiles) .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(jshint.reporter('fail')); return merge(lintStream, compileStream); } return compileStream; }; bundler.on('update', scripts); return scripts(); }); 

Please note that this is highly dependent on the official recipe for quickly creating a browser using watchify ( https://github.com/gulpjs/gulp/blob/master/docs/recipes/fast-browserify-builds-with-watchify.md ) and is an all-in-one type of task; that is, I usually create a separate task somewhere in the background, with minimal logging (I run gulp with the --silent flag), which is personally easier to handle --silent