gulp.series(‘htmlmin‘, ‘cssmin‘, ‘jsmin‘, ‘copy‘)的报错问题The following tasks did not complete

 1. gulp.task('default', ['htmlmin', 'cssmin', 'jsmin', 'copy']);

会报错:
在这里插入图片描述
这就是Gulp 4最大的变化就是你不能像以前那样传递一个依赖任务列表。因此你不能再用Gulp3的方式指定依赖任务,你需要使用gulp.series和gulp.parallel,因为gulp任务现在只有两个参数

gulp.series:按照顺序执行
gulp.paralle:可以并行计算

修改后的代码为:

gulp.task('default',gulp.series('htmlmin', 'cssmin', 'jsmin', 'copy'));

继续报错:
在这里插入图片描述

解决方法:
在gulp4中需要指定task结束
gulp4中,必须告诉gulp我们的task任务已经完成了。gulp3中,我们不必要这么做,因为如果没有发出异步完成信号,那么当任务返回时,gulp会认为它已经完成了,gulp4中必须明确指出任务完成了。
告诉gulp任务完成的另一个常见方法是 返回(return) 一个流或者 Promise:

修改代码(给每一个任务返回一个流):

//告诉gulp任务完成的另一个常见方法是 返回(return) 一个流或者 Promise:
gulp.task('htmlmin', () => {
    
    
	return gulp.src('./src/*.html')
		.pipe(fileinclude())
		//压缩html文件中的文件
		.pipe(htmlmin({
    
     collapseWhitespace: true}))
		.pipe(gulp.dest('dist'));
});

最终代码

//引用gulp模块
const gulp=require('gulp');
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');
const csso = require('gulp-csso');
const less = require('gulp-less');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');

//使用gulp.task建立任务
//1使用任务的名称
//2任务的回调函数
gulp.task('first',()=>{
    console.log("第一个gulp任务执行了")
    //获取要处理文件
    gulp.src('./src/css/base.css')
        .pipe(gulp.dest('./dist/css'));
})
//html任务
//1html文件中代码的压缩操作
//2抽取html文件中的公共代码
gulp.task('htmlmin',()=>{
    return gulp.src('./src/*.html')
    .pipe(fileinclude())
    //压缩html文件中的代码
    .pipe(htmlmin({ collapseWhitespace: true }))
    .pipe(gulp.dest('dist'));
})
//css任务
//1less语法转换
//2css代码压缩
gulp.task('cssmin',()=>{
    //选择css目录下的所有less和css文件
   return gulp.src(['./src/css/*.less','./src/css/*.css'])
    // 将less语法转换成css
        .pipe(less( ))
        // 将css代码进行压缩
        .pipe(csso())
        // 将处理结果进行输出
        .pipe(gulp.dest('./dist/css'))
})
//js任务
//1es6代码转换
//2代码压缩
gulp.task('jsmin',()=>{
   return gulp.src('./src/js/*.js')
    .pipe(babel({
        //可以判断当前代码的运行环境 将代码转换成当前运行环境所支持的代码
        presets: ['@babel/env']
    }))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'))
})
//复制文件夹
gulp.task('copy',()=>{
   return gulp.src('./src/images/*')
        .pipe(gulp.dest('dist/images'));
   return gulp.src('./src/lib/*')
        .pipe(gulp.dest('dist/lib'));    
})

// 构建任务
gulp.task('default',gulp.series('htmlmin', 'cssmin', 'jsmin', 'copy'));

猜你喜欢

转载自blog.csdn.net/d1063270962/article/details/108771360