使用帶有運行序列的gulp時任務未執行的問題

Question

我是gulp的新手，因此我將一個簡單的腳本組合在一起：1）了解gulp的工作原理，以及2）改善開發工作流程。

我遇到的問題是，如果我將runSequence任務列表設置為jscs然后是lint的順序，則不會執行lint任務。 但是，如果我反轉它們，並先運行lint，然后運行jscs，則兩個任務都將成功執行。 經過更多測試之后，我確定是我使用jscs的方式引起了問題，或者jscs出現了問題，阻止了這種方式的執行。

我檢查過的事情：

1. 依賴項已全局安裝。
2. 在我的package.json中已經設置了依賴項。
3. gulpfile.js頂部的所有必需的require語句都已建立。
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.");
        });
    });

});

package.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.

Answer 1

在花了幾個小時研究了問題的原因之后，我將其范圍縮小到以下事實：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那樣提供自定義報告，這使我更加難看，因為一旦添加了對自定義報告的支持 ，我仍然必須重構代碼。