Send parameters to jshint reporter in Gulp

Question

I have Gulpfile with jshint configured to use jshint-stylish reporter. I need to pass option verbose to reporter in order to display warning codes. Is it possible to do it using Gulp?

Current my gulpfile.js looks like below:

var gulp = require('gulp');
var jshint = require('gulp-jshint');
var compass = require('gulp-compass');
var path = require('path');
require('shelljs/global');

var jsFiles = ['www/js/**/*.js', '!www/js/libraries/**/*.js', 'www/spec/**/*.js', '!www/spec/lib/**/*.js'];
var sassFiles = 'www/sass/*.scss';

gulp.task('lint', function () {
    return gulp
        .src(jsFiles)
        .pipe(jshint())
        .pipe(jshint.reporter('jshint-stylish'));
});

gulp.task('compass', function () {
    gulp.src(sassFiles)
        .pipe(compass({
            project: path.join(__dirname, 'www'),
            css: 'css',
            sass: 'sass',
            image: 'img',
            font: 'fonts'
        })).on('error', function() {});
});

var phonegapBuild = function (platform) {
    if (!which('phonegap')) {
        console.log('phonegap command not found')
        return 1;
    }
    exec('phonegap local build ' + platform);
};

gulp.task('build:android', ['lint', 'compass'], function () {
    phonegapBuild('android');
});

gulp.task('build:ios', ['lint', 'compass'], function () {
    phonegapBuild('ios');
});

gulp.task('watch', function() {
    gulp.watch(jsFiles, ['lint']);
    gulp.watch(sassFiles, ['compass']);
});

gulp.task('default', ['lint', 'compass']);

Answer 1

Well, this, plus the fact that the output of the stylish reporter is hardly readable on Windows due to the darkness of the blue text, so I have to keep going in an manually changing the colour after installing it, has made me do something about it. So you should hopefully have more luck with this reporter I've just written:

https://github.com/spiralx/jshint-summary

You basically use it like this;

var summary = require('jshint-summary');

// ...

  .pipe(jshint.reporter(summary({
    verbose: true,
    reasonCol: 'cyan,bold',
    codeCol: 'green'
  })

and the summary function will initialise the function passed to JSHint with those settings - see the page on Github for a bit more documentation.

It's got some very basic tests, and the library's gulpfile.js uses it to show its own JSHint output :)

Answer 2

How about using similar technique, as you already did with phonegap?

var jshint = function (parameter) {
    // todo: define paths with js files, or pass them as parameter too
    exec('jshint ' + paths + ' ' + parameter);
};

Answer 3

Based on https://github.com/wearefractal/gulp-jshint/blob/master/index.js#L99 it appears that gulp-jshint doesn't facilitate passing more than the name to the reporter if you load it with a string. It seems a simple thing to extend though. I'll race you to a pull request. :D

Alternatively, try something like this:

var stylish = require('jshint-stylish');

// ...

.pipe(jshint.reporter(stylish(opt)));

I'm pretty sure I have the syntax wrong, but this may get you unstuck.

Answer 4

It's annoying, and makes any decent reporter somewhat tricky to use within the existing framework. I've come up with this hack for the Stylish reporter, it's just currently in my gulpfile.js:

function wrapStylishReporter(reporterOptions) {
  var reporter = require(stylish).reporter,
    reporterOptions = reporterOptions || {};

  var wrapped = function(results, data, config) {
    var opts = [config, reporterOptions].reduce(function(dest, src) {
      if (src) {
        for (var k in src) {
          dest[k] = src[k];
        }
      }
      return dest;
    }, {});

    reporter(results, data, opts);
  };

  return jshint.reporter(wrapped);
}

And then for the task definition itself:

gulp.task('lint', function() {
  return gulp.src('+(bin|lib)/**/*.js')
    .pipe(jshint())
    .pipe(wrapStylishReporter({ verbose: true }))
    .pipe(jshint.reporter('fail'));
});

Ideally reporters would either be a function that takes an options parameter and returns the reporter function, or a fairly basic class so you could have options as well as state.