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

以下是由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']));

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值