gulp基础
官网文档：https://www.gulpjs.com.cn/
常用命令
查看gulp版本
gulp -v
查看gulp任务tasks 列表
gulp --tasks
项目初始化
1. 项目初始化
npm init -y （-y表示简化版本）
2. 本地项目安装gulp
1. 安装 gulp命令行工具
npm install --global gulp-cli
2. 安装gulp,作为开发时依赖项
npm install --save-dev gulp
或者
npm install -D gulp
安装指定版本的gulp（可以直接删除node_modules文件夹，然后再安装新的版本）
npm install --save-dev gulp@3.9.1 （最新是4.0.2，他的上一个版本是3.9.1）
3. 安装完成以后，可以查看gulp版本
gulp -v
3. 创建gulpfile.js任务
新建一个gulpfile.js文件
function defaultTask(cb) {
cb();
console.log('执行任务defaultTask');
}
exports.default = defaultTask;
//单独调用copy任务
const { src, dest } = require('gulp');
function copy() {
return src('*.js')
.pipe(dest('output/'));
}
exports.copy = copy;
4. 创建npm快捷运行脚本
"build": "gulp" //默认调用default导出的方式
"build-copy": "gulp copy" // 单独调用copy任务
Gulp基础
gulpfile.js 文件
介绍
在运行 gulp 命令时会被自动加载。在这个文件中，你经常会看到类似 src()、dest()、series() 或 parallel() 函数之类的 gulp API，除此之外，纯 JavaScript 代码或 Node 模块也会被使用。任何导出（export）的函数都将注册到 gulp 的任务（task）系统中
gulp分割
大部分用户起初是将所有业务逻辑都写到一个 gulpfile 文件中。随着文件的变大，可以将此文件重构为数个独立的文件。
每个任务（task）可以被分割为独立的文件，然后导入（import）到 gulpfile 文件中并组合。这不仅使事情变得井然有序，而且可以对每个任务（task）进行单独测试，或者根据条件改变组合。
Node 的模块解析功能允许你将 gulpfile.js 文件替换为同样命名为 gulpfile.js 的目录，该目录中包含了一个名为 index.js 的文件，该文件被当作 gulpfile.js 使用。并且，该目录中还可以包含各个独立的任务（task）模块
gulp任务
每个 gulp 任务（task）都是一个异步的 JavaScript 函数，此函数是一个可以接收 callback 作为参数的函数，或者是一个返回 stream、promise、event emitter、child process 或 observable 类型值的函数
导出任务
任务（tasks）可以是 public（公开） 或 private（私有） 类型的。
- 公开任务（Public tasks） 从 gulpfile 中被导出（export），可以通过
gulp命令直接调用。 - 私有任务（Private tasks） 被设计为在内部使用，通常作为
series()或parallel()组合的组成部分。
一个私有（private）类型的任务（task）在外观和行为上和其他任务（task）是一样的，但是不能够被用户直接调用。如需将一个任务（task）注册为公开（public）类型的，只需从 gulpfile 中导出（export）即可。
const { series } = require('gulp');
// `clean` 函数并未被导出（export），因此被认为是私有任务（private task）。
// 它仍然可以被用在 `series()` 组合中。
function clean(cb) {
// body omitted
cb();
}
// `build` 函数被导出（export）了，因此它是一个公开任务（public task），并且可以被 `gulp` 命令直接调用。
// 它也仍然可以被用在 `series()` 组合中。
function build(cb) {
// body omitted
cb();
}
// build 任务是公开任务，可以直接使用命令运行 gulp build
exports.build = build;
exports.default = series(clean, build);
组合任务
Gulp 提供了两个强大的组合方法： series() 同步 和 parallel() 异步，允许将多个独立的任务组合为一个更大的操作。这两个方法都可以接受任意数目的任务（task）函数或已经组合的操作。series() 和 parallel() 可以互相嵌套至任意深度。
series() 方法可以让任务按照顺序执行
const { series } = require('gulp');
function transpile(cb) {
// body omitted
cb();
}
function bundle(cb) {
// body omitted
cb();
}
exports.build = series(transpile, bundle);
对于希望以最大并发来运行的任务（tasks），可以使用 parallel() 方法将它们组合起来
const { parallel } = require('gulp');
function javascript(cb) {
// body omitted
cb();
}
function css(cb) {
// body omitted
cb();
}
exports.build = parallel(javascript, css);
异步执行
当使用 series() 组合多个任务（task）时，任何一个任务（task）的错误将导致整个任务组合结束，并且不会进一步执行其他任务。
当使用 parallel() 组合多个任务（task）时，一个任务的错误将结束整个任务组合的结束，但是其他并行的任务（task）可能会执行完，也可能没有执行完
使用callback
如果任务（task）不返回任何内容，则必须使用 callback 来指示任务已完成
function callbackTask(cb) {
// `cb()` should be called by some async work
cb();
}
exports.default = callbackTask;
返回 promise
function promiseTask() {
return Promise.resolve('the value is ignored');
}
exports.default = promiseTask;
使用 async/await
如果不使用前面提供到几种方式，你还可以将任务（task）定义为一个 async 函数，它将利用 promise 对你的任务（task）进行包装。这将允许你使用 await 处理 promise，并使用其他同步代码
const fs = require('fs');
async function asyncAwaitTask() {
const { version } = fs.readFileSync('package.json');
console.log(version);
await Promise.resolve('some result');
}
exports.default = asyncAwaitTask;
处理文件
gulp 暴露了 src() 和 dest() 方法用于处理计算机上存放的文件。
src() 接受 glob 参数，并从文件系统中读取文件然后生成一个 Node 流（stream）。它将所有匹配的文件读取到内存中并通过流（stream）进行处理
流（stream）所提供的主要的 API 是 .pipe() 方法，用于连接转换流（Transform streams）或可写流（Writable streams）
dest() 接受一个输出目录作为参数，并且它还会产生一个 Node 流（stream），通常作为终止流（terminator stream）
使用babel和gulp结合使用的例子
1. 项目初始化
npm init -y
2. 本地项目安装gulp gulp-babel
npm install --save-dev gulp gulp-babel gulp-uglify gulp-rename
3. 项目安装babel依赖
npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill
4. 创建gulpfile.js任务（新建一个gulpfile.js文件）
const { src, dest } = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');
//分段输出，同时创建已压缩和未压缩的文件
exports.default = function() {
return src('src/*.js')
.pipe(babel())
.pipe(dest('output/'))
.pipe(uglify())
.pipe(rename({ extname: '.min.js' }))
.pipe(dest('output/'));
}
5. src/index.js文件内容是
const sayHi = () => {
console.log('Hi,gulp babel');
}
sayHi();
编译后输出为：output/index.js
"use strict";
var sayHi = function sayHi() {
console.log('Hi,gulp babel');
};
sayHi();
项目的监听
gulpfile.js
const { watch, series } = require('gulp');
function clean(cb) {
console.log('clean run');
cb();
}
function javascript(cb) {
console.log('js run');
cb();
}
function css(cb) {
console.log('css run');
cb();
}
//监听文件：
//第一个参数是：要监听的文件的路径
//第二个参数是：要监听文件需要执行的任务
//可以只关联一个任务
watch('src/*.css', css);
// 或者关联一个任务组合
watch('src/*.js', series(clean, javascript));
//执行的时候，在命令行 node gulpfile.js 就可以实时监听数据的变化
