gulp入门——创建项目到运行

开始

首先全局安装CLI：

npm i -g gulp-cli

创建项目，然后需要在项目里安装 Local Version 的gulp

pnpm add gulp -D

输入命令行查看是否安装成功：

随后创建gulpfile.js ，写入

    function defaulttask(cb){
        cb()
    }

    exports.default = defaulttask

运行成功：

创建任务

任务分为两种 Public / Private ，直接导出的就是 Public，可以直接给命令行跑， Private 的一般由 series() parallel() 去组合起来。

const { series } = require('gulp');

// 导出，Public
// 但还是可以给 series 和 parallel 使用
function clean(cb) {
  // body omitted
  cb();
}

// 没有导出
function build(cb) {
  // body omitted
  cb();
  
}

exports.build = build;
exports.default = series(clean, build);

series() / parallel()

即按照顺序执行 、并发执行，并且可以随意嵌套，如：

const { series, parallel } = require('gulp');

function clean(cb) {
  // body omitted
  cb();
}

function cssTranspile(cb) {
  // body omitted
  cb();
}

function cssMinify(cb) {
  // body omitted
  cb();
}

function jsTranspile(cb) {
  // body omitted
  cb();
}

function jsBundle(cb) {
  // body omitted
  cb();
}

function jsMinify(cb) {
  // body omitted
  cb();
}

function publish(cb) {
  // body omitted
  cb();
}

exports.build = series(
  clean,
  parallel(
    cssTranspile,
    series(jsTranspile, jsBundle)
  ),
  parallel(cssMinify, jsMinify),
  publish
);

异步情况

当出现错误时，series 不会执行下去， parallel 无法确定其他任务完成与否。 不返回如 streams, promises, event emitters, child processes, or observables 时，应该在cb里做好错误回调处理。

function callbackError(cb) {

// `cb()` should be called by some async work

cb(new Error('kaboom'));

}

exports.default = callbackError;

最好是使用 async/await 来处理，async本身就会返回一个 Promise 。

    const fs = require('fs');

    async function asyncAwaitTask() {
      const { version } = JSON.parse(fs.readFileSync('package.json', 'utf8'));
      console.log(version);
      await Promise.resolve('some result');
    }

    exports.default = asyncAwaitTask;

使用ES语法

首先下载，@esbuild-kit/cjs-loader ，然后不是直接使用gulp， 而是使用
gulp --require @esbuild-kit/cjs-loader -f gulpfile.js