使用运行序列使用gulp时，任务不执行时发出

问题描述

我是新人，所以我把一个简单的脚本放在一起，以1）学习如何吞咽和2）改善我的开发工作流程。

我是这个问题因为如果我将runSequence任务列表设置为jscs然后lint的顺序，那么lint任务不会被执行。但是，如果我反转它们，并首先运行lint，然后jscs，那么这两个任务都会成功执行。在做了更多的测试之后，我肯定有一些关于我使用jscs的方式会导致问题，或者jscs有问题会阻止以这种方式执行此操作。

我检查过的东西：

1. 全局安装了依赖项。


2. 在我的package.json中设置了依赖关系。


3. 我的gulpfile.js顶部的所有必需语句都已建立。


4. 检查我为jshint引用的.jshintrc文件实际上是否存在


5. 检查我为jscs引用的.jscsrc文件确实存在

gulpfile.js：

  / *文件：gulpfile.js * / 
 
 / *获取我们将要使用的软件包* / 
 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'）; 
 
 //配置默认任务并将监视任务添加到它
 gulp.task（'default'，['watch']）; 
 
 //配置jscs任务
 gulp.task（'jscs'，function（）{
 return gulp.src（'src / app / ** / *。js '）
 .pipe（jscs（'。jscsrc'））; 
}）; 
 
 //配置lint任务
 gulp.task（'lint'，function（）{
 return gulp.src（src / app / ** / *。js ）
 .pipe（jsHint（'。jshintrc'））
 .pipe（jsHint.reporter（jsHintStylish））; 
}）; 
 
 //配置监视任务 - 设置要监视的文件以及在文件更改时要使用哪些任务
 gulp.task（'watch'，function（）{
 
 //清除控制台
 console.clear（）; 
 
 //设置一个手表以防止需要检查的文件保存
 gulp.watch（' src / app / ** / *。js'，function（）{
 //清除控制台，只显示当前的问题
 console.clear（）; 
 
 //执行任务以检查问题的代码
 runSequence（'lint'，'jscs'，function（）{
 gutil.log（Code Check Complete。）; 
}）; 
}）; 
 
}）; 
  

package.json：

  {
name：my project name，
version：0.1.0，
author：{
名称：我的名字，
email：[email protected]
}，
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]开始'lint'... 
 
c：\Users\anatha\My Projects\Tracks\Tracks.Client\src\app\app.js 
 line 3 col 17未封闭的字符串。 
第4行col 1未封闭的字符串。 
 line 5 col 14未封闭的字符串。 
第6行col 1未封闭的字符串。 
 line 7 col 6未封闭的字符串。 
 line 8 col 1未封闭的字符串。 
第3行col 5未封闭的字符串。 
第1行col 13缺少分号。 
 line 8 col 1缺少使用严格语句。 
第1行col 13无与伦比的'{'。 
第1行col 1不匹配'（'。
第8行col 1期望赋值或函数调用，而是看到一个表达式
第8行col 1缺少分号
 
×4错误
！9警告
 
 [15:10:49] 104 ms后完成'lint'
 [15:10:49]开始'jscs'。 .. 
 [15:10:49]'jscs'在157 ms后出错
 [15:10:49]插件'gulp-jscs'
错误消息：
意外标记ILLEGAL在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]开始'jscs'... 
 [15:09:48]'jscs'在178 ms后出错
 [15:09:48]插件'gulp-jscs' 
消息：
意外的令牌在app.js处为ILLEGAL：
 1 |（function（）{
 2 | 
 3 | '严格使用; 
 ----------------------- ^ 
 4 | 
 5 | var x =; 
 [15:09:48]代码检查完成。 
  

解决方案

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

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

I通过捕获未处理的错误来更新我的脚本以解决此问题，并且为了完成在run-sequence中指定的其余任务所需的错误而执行最少量的处理。

更新 gulpfile.js 档案：

  / *文件：gulpfile.js * / 
 
 / *获取我们将要使用的软件包* / 
 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'）; 
 
 //默认错误处理程序
 var handleJscsError = function（err）{
 console.log（Error：+ err.toString（））; 
 this.emit（'end'）; 
} 
 
 //配置默认任务并添加监视任务到
 gulp.task（'default'，['watch']）; 
 
 //配置jscs任务
 gulp.task（'jscs'，function（）{
 return gulp.src（'src / app / ** / *。js '）
 .pipe（jscs（'。jscsrc'））
 .on（'error'，handleJscsError）; 
}）; 
 
 //配置lint任务
 gulp.task（'lint'，function（）{
 return gulp.src（src / app / ** / *。js ）
 .pipe（jsHint（'。jshintrc'））
 .pipe（jsHint.reporter（jsHintStylish））; 
}）; 
 
 //配置监视任务 - 设置要监视的文件以及在文件更改时要使用哪些任务
 gulp.task（'watch'，function（）{
 
 //清除控制台
 console.clear（）; 
 
 //设置一个手表以防止需要检查的文件保存
 return gulp.watch（ 'src / app / ** / *。js'，function（）{
 
 //清除控制台，只显示当前问题
 console.clear（）; 
 
 //执行任务以检查问题代码
 runSequence（'jscs'，'lint'，function（）{
 console.log（任务已完成）
}） ; 
 
}）; 
 
}）; 
  

另外要注意的是：

I尝试通过创建一个自定义JSCS记者来解决这个问题。虽然我确实有点实用，但它真的让我感觉像是一个混乱，而不是一个固定的解决方案。并补充说JSCS不提供像JSHINT这样的自定义报告，这使得这个丑闻更加明显，一旦，我不得不重构代码。

I am new to gulp and so I put a simple script together to 1) learn how gulp works and 2) improve my development workflow.

The issue I am having is that if I set the runSequence task list to be in the order of jscs and then lint, the lint task does not get executed. However, if I reverse them, and run lint first, then jscs, both tasks execute successfully. After doing more tests, I'm certain that there is something about the way I am using jscs that is causing the problem, or there is an issue with jscs that prevents this from executing in this way.

Things I have checked:

1. Dependencies have been installed globally.
2. Dependencies have been setup in my package.json.
3. All of the needed require statements at the top of my gulpfile.js are established.
4. Checked that the .jshintrc file that I reference for jshint does in fact exist
5. Checked that the .jscsrc file that I reference for jscs does in fact exist

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": "[email protected]"
  },
  "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 file in the folder that is being watched. Notice the errors that I placed so that both jscs and lint will report issues:

(function() {

    'use strict;

    var x = ;

})();

Sample output when the run sequence task ordering is '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.

Sample output when the run sequence task ordering is 'jscs','lint',function(){...} (Notice that the lint statement is never executed):

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

解决方案

After spending a number of hours researching the cause of the issue, I narrowed it down to the fact that JSCS throws an error when it determines that the code it has checked doesn't abide by the specs set by the user. When this error is thrown, it inhibits subsequent tasks in the run-sequence from being executed; however, what is strange is that an unhandled error event is never generated to alert the user of the issue.

This is different than the way JSHINT operates. When JSHINT determines there is an error in the code, it simply outputs the code violations, but doesn't throw an error that causes subsequent tasks to never be triggered.

I updated my script to work around this issue by catching the unhandled error, and performing the minimal amount of processing for that error that was needed to allow the remaining tasks specified in the run-sequence to be completed.

Updated gulpfile.js file:

/* 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.")
        });

    });

});

Another thing to note:

I tried working around the issue by creating a custom JSCS reporter. And while I did get this somewhat functional, it really felt like a cludge to me rather than a solid solution. And to add that JSCS doesn't provide custom reporting like JSHINT does made this even uglier knowing that once support is added for custom reporting, I'd have to refactor the code anyway.

这篇关于使用运行序列使用gulp时，任务不执行时发出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！