在 Gulp 中向 jshint 报告器发送参数

Question

我已将带有 jshint 的 Gulpfile 配置为使用 jshint-stylish 报告器。我需要将选项 verbose 传递给记者以显示警告代码。使用 Gulp 可以做到吗？

当前我的 gulpfile.js 如下所示：

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

嗯，这个，再加上由于蓝色文本的黑暗，时尚记者的输出在 Windows 上很难阅读，所以我必须在安装后继续手动更改颜色，这让我做点什么。所以你应该希望我刚刚写的这个记者能有更多的运气：

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

你基本上是这样用的；

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

// ...

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

summary 函数将使用这些设置初始化传递给 JSHint 的函数 - 有关更多文档，请参阅 Github 上的页面。

它有一些非常基本的测试，库的 gulpfile.js 使用它来显示自己的 JSHint 输出:)

Answer 2

如何使用类似的技术，就像你已经使用 phonegap 所做的那样？

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

Answer 3

基于https://github.com/wearefractal/gulp-jshint/blob/master/index.js#L99，如果您使用字符串加载它，gulp-jshint 似乎不利于将名称传递给报告者。不过，扩展似乎很简单。我将与您竞争拉取请求。 :D

或者，尝试这样的事情：

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

// ...

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

我很确定我的语法有误，但这可能会让你不知所措。

Answer 4

这很烦人，并且让任何体面的记者在现有框架中使用起来都有些棘手。我为 Stylish 记者想出了这个技巧，它目前就在我的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);
}

然后是任务定义本身：

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

理想情况下，记者要么是一个接受选项参数并返回报告者函数的函数，要么是一个相当基本的类，因此您可以拥有选项和状态。