将gulp@3.9.1中的gulp手表转换为gulp @ 4 [英] Convert gulp watch in gulp@3.9.1 to gulp@4
本文介绍了将gulp@3.9.1中的gulp手表转换为gulp @ 4的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我们正在从gulp@3.9.1
切换到gulp@4
,并且无法切换.运行gulp watch
时,出现以下错误并试图找出解决方法.
We are switching from gulp@3.9.1
to gulp@4
and are having trouble switching over. When we run gulp watch
, we are getting the following errors and trying to figure out how to resolve it.
将gulp watch
任务转换为可与gulp@4
一起使用的正确方法是什么?
What is the proper way to convert the gulp watch
task to work with gulp@4
?
错误消息
AssertionError [ERR_ASSERTION]:任务从未定义:
minify-css
命令:gulp watch
Command: gulp watch
- 这应该依次运行
minify-js
然后minify-css
-
minify-js
应该在clean-scripts
成功完成之后运行 -
minify-css
应该在clean-css
成功完成后运行
- This should run
minify-js
thenminify-css
in order minify-js
should run afterclean-scripts
has completed successfullyminify-css
should run afterclean-css
has completed successfully
当前任务.
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']);
}));
推荐答案
我建议将您的minify-js
,minify-css
,clean-scripts
和clean-css
任务转换为函数:
I would recommend converting your minify-js
, minify-css
, clean-scripts
and clean-css
tasks to functions:
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));
这篇关于将gulp@3.9.1中的gulp手表转换为gulp @ 4的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文