Проблема с задачей, которая не выполняется при использовании gulp с run-sequence

Я новичок в gulp, поэтому я собрал простой сценарий: 1) узнать, как работает gulp и 2) улучшить рабочий процесс разработки.

Проблема, с которой я сталкиваюсь, заключается в том, что если я задаю список задач runSequence в порядке jscs, а затем lint, задача lint не будет выполнена. Однако, если я переверну их и сначала запущу lint, а затем jscs, обе задачи будут выполнены успешно. После выполнения большего количества тестов, я уверен, что есть что-то в том, как я использую jscs, что вызывает проблему, или есть проблема с jscs, которая препятствует тому, чтобы это выполнялось таким образом.

Вещи, которые я проверил:

  1. Зависимости были установлены во всем мире.
  2. Зависимости были установлены в моем package.json.
  3. Все необходимые операторы require в верхней части моего gulpfile.js установлены.
  4. Проверено, что файл.jshintrc, на который я ссылаюсь для jshint, действительно существует
  5. Проверено, что файл.jscsrc, на который я ссылаюсь для jscs, действительно существует

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.
Источник

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, и это еще хуже, зная, что, как только будет добавлена ​​поддержка для настраиваемых отчетов, мне все равно придется реорганизовать код.

Источник
Другие вопросы по тегам