gulp-v3和gulp-v4对于创建任务是有区别的。
我用的是v4，下面说明我在学习的过程中理清的一些知识。
项目运行分为两种：
方法一：直接运行gulp
需要在代码中定义default的task，默认执行的是这个task。
代码如下：
const { src, dest, symlink, watch, task, series, parallel } = require('gulp');
const chalk = require('chalk')
function a(cb) {
cb()
}
function b(cb) {
cb()
}
function c(cb) {
cb()
}
function createDist(){ // 生成dist文件（src、dest/symlink使用）
return src('src/*.js')
.pipe(symlink('dist/'));
}
const tasks = [createDist, parallel([a, b, c])];
function watching() {
console.log(chalk.red('正在监听文件...'))
const watcher = watch(['src/*.js']);
watcher.on('change', function(path, stats) {
console.log('更新：1', path, stats);
});
watcher.on('add', function(path, stats) {
console.log('更新：2', path, stats);
});
}
// 以上都是在定义task
tasks.push(watching);
function seriesTask() { // 将所有task顺序定为串行执行
return series(tasks)();
}
task('default', seriesTask); // 运行gulp执行的task
运行gulp后，结果如下：
新增文件，监听如下：
再修改文件，监听如下：
方法二：直接运行npm run start
（1）需要在package.json里面定义npm scripts："start": "gulp start"；
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "gulp start"
},
（2）需要在gulpfile.js文件中创建'start'这个task，与上面定义的npm scripts对应。
代码如下：
const { src, dest, symlink, watch, task, series, parallel } = require('gulp');
const chalk = require('chalk')
function a(cb) {
cb()
}
function b(cb) {
cb()
}
function c(cb) {
cb()
}
function createDist(){ // 生成dist文件（src、dest/symlink使用）
return src('src/*.js')
.pipe(symlink('dist/'));
}
const tasks = [createDist, parallel([a, b, c])];
function watching() {
console.log(chalk.red('正在监听文件...'))
const watcher = watch(['src/*.js']);
watcher.on('change', function(path, stats) {
console.log('更新：1', path, stats);
});
watcher.on('add', function(path, stats) {
console.log('更新：2', path, stats);
});
}
// 以上都是在定义task
tasks.push(watching);
function seriesTask() { // 将所有task顺序定为串行执行
return series(tasks)();
}
task('start', seriesTask); // 运行gulp执行的task
运行结果和上面一样，因为只是方法不一样而已：
后面的修改和添加文件都是可以正确监听到。
疑惑解答：
我想说一下：无论是series还是parallel，为什么有的starting和finishing都有，而有的只有starting ？
解释： 终于知道创建task的cb()是干嘛的了，是等待异步执行完了之后的一个标志。如果一个task函数没写cb()，则就不会finishing，同时也会报错。如下：
将a，b函数的cb()注释掉
- 运行结果 -
官方解读：每个 gulp 任务（task）都是一个异步的 JavaScript 函数，此函数是一个可以接收 callback 作为参数的函数，或者是一个返回 stream、promise、event emitter、child process 或 observable类型值的函数。
总结：因此，我写的这个虽然是个简单的task，但也是必须要写cb()的，切记哦～～～ok！～～本级别gulp了解完成～～
还有一点需要注意：
symlink和dest的区别：在于src有没有加base路径，如下：
（1）无论有没有base，dest总会生成和src第一个参数路径相同路径的文件
function createDist(){ // 生成dist文件（src、dest/symlink使用）
return src('src/*.js', {base: './'})
.pipe(dest('dist/'));
}
（2）使用symlink，没有base时，则只会在dist文件下生成本文件名；有{ base:'./' }时，和dest生成一样。
function createDist(){ // 生成dist文件（src、dest/symlink使用）
return src('src/*.js')
.pipe(symlink('dist/'));
}
无base，只生成文件，没带路径
function createDist(){ // 生成dist文件（src、dest/symlink使用）
return src('src/*.js', {base: './'})
.pipe(symlink('dist/'));
}
加了base: './'，和dest生成一样的路径文件
function createDist(){ // 生成dist文件（src、dest/symlink使用）
return src('src/*.js', {base: '../'})
.pipe(symlink('dist/'));
}
加了base: '../'，则会以当前文件路径为相对路径进行复制文件路径
⚠️注意：添加比如这个base:'./ss/'就会报错，就会将src底下的test.js文件删掉，造成代码错误，因此，base也不能随便写路径～～如果要使用symlink，请谨慎使用。。
网友评论