gulp 4.0: запускать задачи последовательно

Я пытаюсь запустить набор задач последовательно, то есть одну за другой в Gulp 4.0, однако, когда я добавляю свою третью задачу, мой код gulp ломается.

    gulp.task('concat-js', (done) => {
      gulp.src([  
        'app1.js',
        'app2.js',
      ])
      .pipe(concat("app.js")) 
      .pipe(gulp.dest('build'))
      done();
    });

    gulp.task('concat-css', (done) => {
      gulp.src([
        '.styles1.css',
        '.style2.css'
      ])
      .pipe(concat("app.css"))
      .pipe(gulp.dest('build'))
      done();  
    });

    gulp.task('minify-js', (done) => {
      gulp.src('./build/app.js')
      .pipe(uglify())
      .pipe(gulp.dest('./build/'))
      done();
    })

    //this works & creates /build with the app.js & app.css files
    gulp.task('build-production-static-resource', gulp.series('concat-js', 'concat-css',, (done) => {
      done();
    }));

Если я удалю папку сборки, чтобы начать все сначала, и попытаюсь добавить другую задачу (minfy-js), моя третья задача завершится ошибкой, и папка сборки также не будет создана.

    //File not found with singular glob: /Users/user/myapp/build/app.js
    gulp.task('build-production-static-resource', gulp.series('concat-js', 'concat-css', 'minify-js', (done) => {
      done();
    }));

javascript gulp gulp-4
person cacoder    schedule 27.07.2016    source источник

Ответы (1)


arrow_upward
4
arrow_downward

То, как вы сигнализируете об асинхронном завершении своих задач, неверно. Прочтите этот ответ для обзора различных способов, которыми вы можете сигнализировать о завершении асинхронного выполнения в gulp.

В основном все потоки, которые вы создаете через gulp.src(), являются асинхронными. Это означает, что вы создаете поток, и ваш код немедленно возвращается. Однако фактическая обработка потока начинается только после выхода из функции задачи. Чтобы gulp знал, что вы используете поток и что он должен дождаться завершения обработки потока, вам нужно return поток из вашей задачи.

Вы делаете что-то совсем другое. Вы вызываете функцию обратного вызова done, которая является еще одним способом сообщить gulp о завершении асинхронной задачи. Однако в данном случае это совершенно неверный путь, потому что, когда вы вызываете функцию обратного вызова done, созданный вами поток еще даже не начал обрабатываться.

Это означает, что gulp считает, что ваша задача concat-js завершена, хотя код внутри вашей задачи еще даже не начал выполняться. Итак, когда запускается задача minify-js, ваш файл ./build/app.js еще не создан. Бум. Ошибка.

Чтобы исправить это, всегда return потоки из ваших задач:

gulp.task('concat-js', () => {
  return gulp.src([  
      'app1.js',
      'app2.js',
    ])
    .pipe(concat("app.js")) 
    .pipe(gulp.dest('build'))
});

gulp.task('concat-css', () => {
  return gulp.src([
      '.styles1.css',
      '.style2.css'
    ])
    .pipe(concat("app.css"))
    .pipe(gulp.dest('build'))
});

gulp.task('minify-js', () => {
  return gulp.src('./build/app.js')
    .pipe(uglify())
    .pipe(gulp.dest('./build/'))
})

gulp.task('build-production-static-resource', gulp.series(
  'concat-js', 'concat-css', 'minify-js'
));
person Sven Schoenung    schedule 27.07.2016