以下是由gulp中:Did you forget to signal async completion?引出的三个问题:
1.Did you forget to signal async completion?
//css 任务
//1. less语法转换
//2.css代码压缩
gulp.task('cssmin',()=>{
//选择css目录下的文件
gulp.src(['./src/css/*.less','./src/css/*.css'])
///将less语法转化为css
.pipe(less())
//css代码压缩操作
.pipe(csso())
.pipe(gulp.dest('dist/css'))
})
报错:
官方解决方法:向task的函数里传入一个名叫done的回调函数,以结束task
gulp.task('cssmin',done=>{
//选择css目录下的文件
gulp.src(['./src/css/*.less','./src/css/*.css'])
///将less语法转化为css
.pipe(less())
//css代码压缩操作
.pipe(csso())
.pipe(gulp.dest('dist/css'))
done()
})
此时我又迎来了第二个问题:
2.task函数不能识别箭头函数
解决方法:
1.改成普通函数
gulp.task('cssmin',function(done){
//选择css目录下的文件
gulp.src(['./src/css/*.less','./src/css/*.css'])
///将less语法转化为css
.pipe(less())
//css代码压缩操作
.pipe(csso())
.pipe(gulp.dest('dist/css'))
done()
})
2.使用基于Babel的gulp,下载Babel,之后gulp函数都可以使用es6的语法,永绝后患
解决方法我参照了
https://yaowenjie.github.io/front-end/using-gulp-with-babel
1.安装Babel
npm install babel
2.将gulpfile.js命名为gulpfile.babel.js
3.安装babel-preset-es2015这个插件
npm install babel-preset-es2015
4.安装好之后,需要在.babelrc文件内添加
{
"presets": ["es2015"]
}
注:我创建的项目中没有.babelrc这个文件,于是我自己在根目录中创建了这个文件:
之后就可以使用es6语法了,就可以使用箭头函数了
//js任务
//1.es6代码转换
//2.代码压缩
gulp.task('jsmin',(done)=>{
gulp.src('./src/js/*.js')
.pipe(babel({
//他可以判断当前代码的运行环境 将代码转换成当前环境支持的语法
presets: ['@babel/env']
}))
//压缩
.pipe(uglyfly())
.pipe(gulp.dest('dist/js'))
done()
})
3. 在自动创建任务时,发生Task function must be specified
//构建任务
gulp.task('default',['htmlmin','cssmin','jsmin']);
查看官方文档gulp4.0,参数‘default’后面必须跟一个series()函数,顺序执行任务
修改代码如下
//构建任务
gulp.task('default',gulp.series(['htmlmin','cssmin','jsmin']));
结果:
完结撒花!!!有错误的地方欢迎指教!!!