gulp进阶 - 创建任务+监听文件

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，请谨慎使用。。