gulp 4.0爬坑指南

好久时间没有用gulp,最近公司有个项目须要优化,使用了gulp处理多文件流,才发现4.0还有这么多的坑,和旧版比很是不习惯。很少说了,看来还得去刷一遍api。javascript

一、gulp.src里使用数组会致使遍历不全问题。

gulp.src(['./*-en-us','./*-zh-hans','./*-zh-tw'])  //致使遍历不全

//拆分才能遍历彻底
gulp.src('./*-en-us')
gulp.src('./*-zh-hans')
gulp.src('./*-zh-tw')
复制代码

二、task写法彻底改变

旧版css

gulp.task('clean',function(){
    ...
})
复制代码

新版java

function clean(cb) {
  cb();
}
//两种写法return或ch()回调
function javascript() {
  return  gulp.src(path.join('./*-'+fildNmae))
}
复制代码

三、watch监听写法已改变

旧版监听gulp

gulp.task('watch',function(){
    gulp.watch('./stylesheets/**/*.scss',['sass','css']);
})
复制代码

4.0版本监听api

const { watch, series } = require('gulp');
function clean(cb) {
  cb();
}
//两种写法return或ch()回调
function javascript() {
  return  gulp.src(path.join('./*-'+fildNmae))
}
// 能够只关联一个任务
watch('src/*.js', javascript);
// 或者关联一个任务组合
watch('src/*.js', series(clean, javascript));
复制代码

新版传参数组

function copy(fildNmae) {
  return gulp.src(path.join('./*-'+fildNmae))
}
gulp.watch('./src/**/*', { events: 'change' },function(cb){
    copy('zh-hans');
    copy('en-us');
    copy('zh-tw');
    cb();
  })
复制代码
相关文章
相关标签/搜索