将 gulp 与 运行 序列一起使用时任务未执行的问题
Issue with task not executing when using gulp with run-sequence
我是 gulp 的新手，所以我编写了一个简单的脚本来 1) 了解 gulp 的工作原理和 2) 改进我的开发工作流程。
我遇到的问题是，如果我将 运行Sequence 任务列表设置为 jscs 和 lint 的顺序，则 lint 任务不会执行。但是，如果我反转它们，并且先 运行 lint，然后是 jscs，那么这两个任务都会成功执行。在进行了更多测试之后，我确定是我使用 jscs 的方式导致了问题，或者 jscs 存在问题导致无法以这种方式执行。
我检查过的东西：
- 已全局安装依赖。
- 已在我的 package.json.
中设置依赖项
- 我的 gulpfile.js 顶部所有需要的 require 语句都已建立。
- 已检查我为 jshint 引用的 .jshintrc 文件确实存在
- 已检查我为 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.
在花了几个小时研究问题的原因后，我将问题的范围缩小到 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 那样的自定义报告，知道一旦 support is added for custom reporting，我就不得不重构代码。
我是 gulp 的新手，所以我编写了一个简单的脚本来 1) 了解 gulp 的工作原理和 2) 改进我的开发工作流程。
我遇到的问题是，如果我将 运行Sequence 任务列表设置为 jscs 和 lint 的顺序，则 lint 任务不会执行。但是，如果我反转它们，并且先 运行 lint，然后是 jscs，那么这两个任务都会成功执行。在进行了更多测试之后，我确定是我使用 jscs 的方式导致了问题，或者 jscs 存在问题导致无法以这种方式执行。
我检查过的东西：
- 已全局安装依赖。
- 已在我的 package.json. 中设置依赖项
- 我的 gulpfile.js 顶部所有需要的 require 语句都已建立。
- 已检查我为 jshint 引用的 .jshintrc 文件确实存在
- 已检查我为 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.
在花了几个小时研究问题的原因后，我将问题的范围缩小到 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 那样的自定义报告，知道一旦 support is added for custom reporting，我就不得不重构代码。