0

我是 gulp 的新手，所以我将一个简单的脚本放在一起 1) 了解 gulp 的工作原理和 2) 改进我的开发工作流程。

我遇到的问题是，如果我将 runSequence 任务列表设置为 jscs 然后 lint 的顺序，则不会执行 lint 任务。但是，如果我反转它们，先运行 lint，然后运行 ​​jscs，这两个任务都会成功执行。在进行了更多测试之后，我确定我使用 jscs 的方式存在问题，或者 jscs 存在问题，导致无法以这种方式执行。

我检查过的事情：

  1. 已在全球范围内安装了依赖项。
  2. 已在我的 package.json 中设置了依赖项。
  3. 我的 gulpfile.js 顶部的所有需要​​的语句都已建立。
  4. 检查我为 jshint 引用的 .jshintrc 文件确实存在
  5. 检查我为 jscs 引用的 .jscsrc 文件确实存在

gulpfile.js：

/* File: gulpfile.js */

/* grab the packages we will be using */
var gulp = require('gulp');
var gutil = require('gulp-util');
var jscs = require('gulp-jscs');
var jsHint = require('gulp-jshint');
var jsHintStylish = require('jshint-stylish');
var runSequence = require('run-sequence');
var console = require('better-console');

// configure the default task and add the watch task to it
gulp.task('default', ['watch']);

// configure the jscs task
gulp.task('jscs', function() {
    return gulp.src('src/app/**/*.js')
        .pipe(jscs('.jscsrc'));
});

// configure the lint task
gulp.task('lint', function() {
    return gulp.src("src/app/**/*.js")
        .pipe(jsHint('.jshintrc'))
        .pipe(jsHint.reporter(jsHintStylish));
});

// configure the watch task - set up which files to watch and what tasks to use when those files change
gulp.task('watch',function() {

    // Clear console
    console.clear();

    // setup a watch against the files that need to be checked on save
    gulp.watch('src/app/**/*.js', function(){
        // Clear console so only current issues are shown
        console.clear();

        // Execute tasks to check code for issues
        runSequence('lint','jscs',function(){
            gutil.log("Code Check Complete.");
        });
    });

});

包.json：

{
  "name": "my project name",
  "version": "0.1.0",
  "author": {
    "name": "my name",
    "email": "myemail@domain.com"
  },
  "devDependencies": {
    "better-console": "^0.2.4",
    "gulp": "^3.8.11",
    "gulp-jscs": "^1.6.0",
    "gulp-jshint": "^1.11.0",
    "gulp-util": "^3.0.4",
    "jshint-stylish": "^1.0.2",
    "run-sequence": "^1.1.0"
  }
}

正在监视的文件夹中的 JavaScript 文件。请注意我放置的错误，以便 jscs 和 lint 都会报告问题：

(function() {

    'use strict;

    var x = ;

})();

运行序列任务排序为时的示例输出'lint','jscs',function(){...}：

[15:10:49] Starting 'lint'...

c:\Users\anatha\My Projects\Tracks\Tracks.Client\src\app\app.js
  line 3  col 17  Unclosed string.
  line 4  col 1   Unclosed string.
  line 5  col 14  Unclosed string.
  line 6  col 1   Unclosed string.
  line 7  col 6   Unclosed string.
  line 8  col 1   Unclosed string.
  line 3  col 5   Unclosed string.
  line 1  col 13  Missing semicolon.
  line 8  col 1   Missing "use strict" statement.
  line 1  col 13  Unmatched '{'.
  line 1  col 1   Unmatched '('.
  line 8  col 1   Expected an assignment or function call and instead saw an expression.
  line 8  col 1   Missing semicolon.

  ×  4 errors
  ‼  9 warnings

[15:10:49] Finished 'lint' after 104 ms
[15:10:49] Starting 'jscs'...
[15:10:49] 'jscs' errored after 157 ms
[15:10:49] Error in plugin 'gulp-jscs'
Message:
    Unexpected token ILLEGAL at app.js :
     1 |(function() {
     2 |
     3 | 'use strict;
-----------------------^
     4 |
     5 | var x = ;
[15:10:49] Code Check Complete.

运行序列任务排序为时的示例输出'jscs','lint',function(){...}（注意 lint 语句从未执行）：

[15:09:48] Starting 'jscs'...
[15:09:48] 'jscs' errored after 178 ms
[15:09:48] Error in plugin 'gulp-jscs'
Message:
    Unexpected token ILLEGAL at app.js :
     1 |(function() {
     2 |
     3 | 'use strict;
-----------------------^
     4 |
     5 | var x = ;
[15:09:48] Code Check Complete.
4

1 回答 1

0

在花了几个小时研究问题的原因后，我将其范围缩小到 JSCS 在确定它检查的代码不遵守用户设置的规范时抛出错误的事实。当抛出此错误时，它会禁止执行运行序列中的后续任务；然而，奇怪的是从未生成未处理的错误事件来提醒用户该问题。

这与 JSHINT 的操作方式不同。当 JSHINT 确定代码中有错误时，它只是输出代码违规，但不会抛出导致后续任务永远不会触发的错误。

我更新了我的脚本来解决这个问题，方法是捕获未处理的错误，并对该错误执行最少量的处理，以允许完成运行序列中指定的剩余任务。

更新gulpfile.js文件：

/* File: gulpfile.js */

/* grab the packages we will be using */
var gulp = require('gulp');
var gUtil = require('gulp-util');
var jscs = require('gulp-jscs');
var jsHint = require('gulp-jshint');
var jsHintStylish = require('jshint-stylish');
var runSequence = require('run-sequence');
var console = require('better-console');

// default error handler
var handleJscsError = function(err) {
    console.log("Error: " + err.toString());
    this.emit('end');
}

// configure the default task and add the watch task to it
gulp.task('default', ['watch']);

// configure the jscs task
gulp.task('jscs', function() {
    return gulp.src('src/app/**/*.js')
        .pipe(jscs('.jscsrc'))
        .on('error',handleJscsError);
});

// configure the lint task
gulp.task('lint', function() {
    return gulp.src("src/app/**/*.js")
        .pipe(jsHint('.jshintrc'))
        .pipe(jsHint.reporter(jsHintStylish));
});

// configure the watch task - set up which files to watch and what tasks to use when those files change
gulp.task('watch', function() {

    // Clear console
    console.clear();

    // setup a watch against the files that need to be checked on save
    return gulp.watch('src/app/**/*.js', function(){

        // Clear console so only current issues are shown
        console.clear();

        // Execute tasks to check code for issues
        runSequence('jscs','lint',function(){
            console.log("Tasks Completed.")
        });

    });

});

还有一点需要注意：

我尝试通过创建自定义 JSCS 报告器来解决此问题。虽然我确实得到了这个功能，但它对我来说真的像是一个杂物，而不是一个可靠的解决方案。并且要补充一点，JSCS 不提供像 JSHINT 那样的自定义报告确实使这更加丑陋，因为知道一旦添加了对自定义报告的支持，我无论如何都必须重构代码。

于 2015-05-24T18:07:04.367 回答