Конвертировать gulp watch в gulp@3.9.1 в gulp @ 4 - PullRequest
Новая
       31

Конвертировать gulp watch в gulp@3.9.1 в gulp @ 4

0 голосов
/ 07 марта 2019

Мы переключаемся с gulp@3.9.1 на gulp@4 и у нас возникают проблемы при переключении. Когда мы запускаем gulp watch, мы получаем следующие ошибки и пытаемся выяснить, как их устранить.

Как правильно преобразовать задачу gulp watch для работы с gulp@4?

Сообщение об ошибке

AssertionError [ERR_ASSERTION]: задача не определена: minify-css

Команда: gulp watch

  • Это должно работать minify-js, затем minify-css в порядке
  • minify-js должен запускаться после успешного завершения clean-scripts
  • minify-css должен запускаться после успешного завершения clean-css

Текущие задачи. 

var gulp = require('gulp'),
    cssmin = require('gulp-clean-css'),
    clean = require('gulp-clean'),
    uglify = require('gulp-uglify');
    
var src = {
  js: 'js/some-dir/**/*.js',
  css: 'css/some-dir/**/*.css'
};

var dest = {
  js: 'js/dest/some-dir/**/*.js',
  css: 'css/dest/some-dir/**/*.css'
};

gulp.task('clean-css', function() {
  return gulp.src(dest.css)
             .pipe(clean({read:false, force: true});
});

gulp.task('minify-css', ['clean-css'], function() {
  gulp.src(src.css)
    .pipe(cssmin())
    .pipe(gulp.dest(dest.css));
});

gulp.task('clean-scripts', function() {
  return gulp.src(dest.js)
             .pipe(clean({read:false, force: true});
});

gulp.task('minify-js', ['clean-scripts'], function() {
   gulp.src(src.js)
       .pipe(uglify())
       .pipe(gulp.dest(dest.js));
});

gulp.task('watch', ['minify-js', 'minify-css'], function() {
  gulp.watch(src.js, ['minify-js']);
  gulp.watch(src.css, ['minify-css']);
});

Мы пытались сделать это, но это привело к сообщению об ошибке 

gulp.task('watch', gulp.series('minify-js', 'minify-css', function() {
  gulp.watch(src.js, ['minify-js']);
  gulp.watch(src.css, ['minify-css']);
}));

Ответы [ 3 ]

2 голосов
/ 07 марта 2019 
gulp.task('minify-css', gulp.series('clean-css', function() {
  return gulp.src(src.css)
    .pipe(cssmin())
    .pipe(gulp.dest(dest.css));
}));

gulp.task('minify-js', gulp.series('clean-scripts', function() {
   return gulp.src(src.js)
       .pipe(uglify())
       .pipe(gulp.dest(dest.js));
}));

gulp.task('watch', gulp.series('minify-js', 'minify-css', function() {
  gulp.watch(src.js, gulp.series('minify-js'));
  gulp.watch(src.css, gulp.series('minify-css'));
}));

Как предложил @Abdaylan, я также рекомендую переключиться на функции.Тем не менее, чтобы вы могли видеть, где ваш код был неправильным, я исправил это здесь.Gulp 4 не использует этот синтаксис: 

gulp.task('someTask', ['task1', 'task2'], function () {});  // gulp 3

Gulp 4: 

gulp.task('someTask', gulp.series('task1', 'task2', function () {}));  // gulp 4 with string tasks

или gulp.parallel.Таким образом, вы можете использовать синтаксис gulp.task (а не именованные функции), если вы измените их, чтобы использовать сигнатуры, которые поддерживает gulp 4, как я делал в вашем измененном коде в верхней части этого ответа.

Gulp 4 сименованные функции: 

gulp.task(someTask, gulp.series(task1, task2, function () {}));  // gulp 4 with named functions

То есть с именованными функциями задачи не называются строками.

См. также задача, никогда не определяемая , для других потенциальных проблем при миграции изgulp3 - gulp4 с тем же сообщением об ошибке.

1 голос
/ 07 марта 2019

Я сам столкнулся с этим пару дней назад.Для меня работало то, что каждая задача выполнялась в отдельном gulp.watch() с gulp.series() при вызове контрольной задачи вместо самой контрольной задачи.Например: 

gulp.task('watch', function() {
  gulp.watch(src.js, gulp.series('minify-js'));
  gulp.watch(src.css, gulp.series('minify-css'));
});
1 голос
/ 07 марта 2019

Я бы рекомендовал преобразовать ваши задачи minify-js, minify-css, clean-scripts и clean-css в функции: 

var dest = {
  js: 'js/dest/some-dir/**/*.js',
  css: 'css/dest/some-dir/**/*.css'
};

function cleanCss() {
  return gulp.src(dest.css)
             .pipe(clean({read:false, force: true});
});

function minifyCss() {
  return gulp.src(src.css)
             .pipe(cssmin())
             .pipe(gulp.dest(dest.css));
});

function cleanScripts() {
  return gulp.src(dest.js)
             .pipe(clean({read:false, force: true});
});

function minifyJs() {
   return gulp.src(src.js)
       .pipe(uglify())
       .pipe(gulp.dest(dest.js));
});

var minifyJsAndClean = gulp.series(minifyJs, cleanScripts);
var minifyCssAndClean = gulp.series(minifyCss, cleanCss);
var watchers = function (done) {
   gulp.watch(src.js, minifyJs);
   gulp.watch(src.css, minifyCss);
   done();
}

gulp.task('watch', gulp.series(minifyJsAndClean, minifyCssAndClean, watchers));
...