由gulp中：Did you forget to signal async completion?引出的三个问题


以下是由gulp中：Did you forget to signal async completion?引出的三个问题：

1.Did you forget to signal async completion？

1
2
3
4
5
6
7
8
9
10
11
12
//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

1
2
3
4
5
6
7
8
9
10
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.改成普通函数

1
2
3
4
5
6
7
8
9
10
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

1
npm install babel

2.将gulpfile.js命名为gulpfile.babel.js
在这里插入图片描述
3.安装babel-preset-es2015这个插件

1
npm install babel-preset-es2015

4.安装好之后，需要在.babelrc文件内添加

1
2
3
{
  "presets": ["es2015"]
}

注：我创建的项目中没有.babelrc这个文件，于是我自己在根目录中创建了这个文件：
在这里插入图片描述
之后就可以使用es6语法了，就可以使用箭头函数了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//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

1
2
//构建任务
gulp.task('default',['htmlmin','cssmin','jsmin']);

在这里插入图片描述
查看官方文档gulp4.0,参数‘default’后面必须跟一个series()函数,顺序执行任务
在这里插入图片描述
修改代码如下

1
2
//构建任务
gulp.task('default',gulp.series(['htmlmin','cssmin','jsmin']));

结果：
在这里插入图片描述

完结撒花！！！有错误的地方欢迎指教！！！