gulp本地构建

一、

1.初始化(生成package.json文件)

npm init

2.安装gulp依赖(生成 package-lock.json 和 node_modules 目录)

npm install gulp --save-dev

 

二、glob （匹配模式）

*  匹配任意个字符

？ 匹配一个字符

[...] 匹配范围内字符

!(pattern1|pattern2) 匹配取反

?(pattern1|pattern2) 匹配0或1个

+(pattern1|pattern2) 匹配1或多个

*(a|b|c) 匹配任意个

@(pattern|par*|pat?erN) 匹配特定的一个

** 任意层级匹配

 

三、 报错解决

1、  Did you forget to signal async completion?

gulp.task('less', () => {
  gulp.src('src/style/**/*.less')
  .pipe(less())
  .pipe(gulp.dest('build'));
});

报错：

The following tasks did not complete: less
Did you forget to signal async completion?

解决：显示指定task已完成

（1）使用回调函数

gulp.task('clean', function(done) {
  del(['build]);
    done();
});

（2）返回new Promise()

gulp.task('default', gulp.series('clean', 'less', () => {
  return new Promise((resolve, reject) => {
    console.log('done!');
    resolve();
  })
}));

（3）async await异步

gulp.task('less', async () => {
   await gulp.src('src/style/**/*.less')
  .pipe(less())
  .pipe(gulp.dest('build'));
});

Starting 'less'...
Finished 'less' after 11 ms

 

2. gulp 4.x    throw new assert.AssertionError || done is not a function

gulp 4新增两个函数

gulp.series：按照顺序执行（替代了gulp3.x中[deps]依赖问题）
gulp.paralle：可以并行计算

解决：

gulp.task('my-tasks', gulp.series('a', 'b', 'c', function() {
  // Do something after a, b, and c are finished.
}));

gulp.task('my-tasks', gulp.parallel('a', 'b', 'c', function() {
  // 异步执行.
}));