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'));