gulp4.x 的初步了解，初步使用

gulp官网： https://gulpjs.com/docs/en/getting-started/quick-start （英文）

gulp指令文件有两种书写方法：

1、 简单明了直接在项目根目录创建一个gulpfile.js文件
gulpfile.js 可以将所有任务都写在这个文件里；

2、分割gulpfile.js
当项目比较大时，需要做比较多的处理，也就意味着gulp的任务会很多；这时，我们可以将每个任务分割成自己的文件，然后倒入到gulpfile中进行组 合。（这样处理的优点：这样不仅有组织性，还允许你独立地测试每一个任务，或者根据条件改变任务组成）;
Node解析模块允许使用名为gulpfile.js的目录（即文件夹）来代替gulpfile.js文件，该目录（文件夹）要包含一个被视为gulpfile.js的index.js文件。 然后，该目录（文件夹）可以包含用于任务的各个模块。如果你要使用转置器，请相应地命名文件夹和文件。

可以看到图中根目录下是已经没有gulpfile.js文件，而是有一个gulpfile.js文件夹，文件夹中有两个文件，一个是处理编译scss文件的任务（css.js），一个是被视为gulpfile.js文件的index.js文件，

css.js:
const sass = require(‘gulp-sass’);
function css() {
return src(’./src/static/scss/*.scss’)
.pipe(sass({outputStyle: ‘expanded’}).on(‘error’, sass.logError))
.pipe(dest(’./test/css’))
}
exports.css = css;

index.js:
const { series, parallel } = require(‘gulp’);
const { css } = require(’./css.js’);
function a(cb) {
console.log(123)
cb();
}
function b(cb) {
console.log(456)
cb();
}
exports.do = series(a, b, css)

注意！
gulp4.x 与过往版本的差别

公共任务 && 私有任务

1、任务可以被视为公共的或私有的
· 公共任务：是从gulpfile.js文件中使用exports导出的任务，然这些任务是可以通过gulp命令运行
私有任务：在gulpfile.js内部使用的任务，通常被用作series() 和 parallel() 组合的一部分。
私有任务表面上看起来和其他任务一样， 但是最终用户不能独立执行它。 需要公开注册一个任务，从你的gulpfile文件中导出它。

Eg:
引入gulp中的series方法
const { series } = require(‘gulp’);
// clean函数没有通过exports导出，所以它被视为私有任务；
// 它仍然可以在‘series（）’组合中使用
function clean(cb) {
// body omitted
cb();
}

// build函数被exports导出，所以它是公共任务，并且可以通过gulp命令来执行；
// 它也可以用在series（）组合里
function build(cb) {
// body omitted
cb();
}
exports.build = build;
exports.default = series(clean, build);

运行上面的任务： gulp build // 这里只执行了build函数的任务
gulp // 这里是按顺序执行clean 和 build函数的任务

2、gulp中的series() && parallel() && series() 和 parallel()嵌套使用
· series() 使用这个方法来执行私有任务时，这些任务是按顺序执行的（即a任务执行完，就执行b任务···依次执行下去）。
· parallel() 使用跟这个方法来执行私有任务时，这些任务是并发执行（即同步执行，开始执行a任务，b任务···依次开始执行，所有任务都开始执行了，然后就会显示a任务完成，b任务完成···依次执行）
const { series, parallel } = require(‘gulp’);

function clean(cb) {
console.log(‘clean’);
cb();
}
function cssTranspile(cb) {
console.log(‘cssTranspile’);
cb();
}
function cssMinify(cb) {
console.log(‘cssMinify’);
cb();
}
function jsTranspile(cb) {
console.log(‘jsTranspile’);
cb();
}
function jsBundle(cb) {
console.log(‘jsBundle’);
cb();
}

function jsMinify(cb) {
console.log(‘jsMinify’);
cb();
}
function publish(cb){
console.log(‘publish’);
cb();
}

使用series() 执行任务

使用parallel() 执行任务

使用series()和parallel()嵌套执行任务