Gulp的基本使用

Gulp

简介

自动化构建工具

自动化构建工具，可以帮我们又快又好的完成自动化构建任务。相比有 npm scripts，自动化构建工具，功能更为强大。更简单易学。其中比较流行的有三款：

Grunt

是第一款自动化构建工具，对前端工程化的发展具有里程碑意义，其生态完善。但是，它的构建是基于临时文件的，所以构建速度较慢，现在用的人越来越少了。

Gulp

Gulp 的构建是基于内存实现的，其构建速度比 Grunt 快，而且，Gulp 的生态也很完善，插件质量很高。目前最为流行。

FIS

FIS 是百度的前端团队对出的，最开始只在百度内部使用。开源后，逐渐在国内流行起来。但是其更新跟不上，最近的更新都是三年前的，而且其生态主要有国人维护（ Grunt 和 Gulp 生态是世界范围的 ）。所以，其流行度比不上 Gulp。

Gulp

Gulp 是基于 流 的自动化构建系统。

Gulp 的特点

任务化

所有的构建操作，在 gulp 中都称之为任务

基于流

gulp 中所有的文件操作，都是基于 流 方式进行 （ Gulp有一个自己的内存，通过指定 API 将源文件流到内存中，完成相应的操作后再通过相应的 API 流出去）

基础

使用 Gulp 之前，先在全局安装 gulp-cli （ Gulp 的命令行工具 ）

# 全局安装 gulp 客户端
npm i -g gulp-cli 

# 验证安装是否成功
gulp -v

基本用法

Gulp 使用的基本逻辑是：先声明任务，再从命令行中执行任务；具体步骤如下：

1. 使用 Gulp 之前，先在全局安装 gulp-cli

# 安装 gulp 命令行工具
npm i -g gulp-cli 

# 验证安装是否成功
gulp -v

2.初始化项目

# 创建项目目录
mkdir project-name

# 进入项目目录
cd project-name

# 初始化项目
npm init --yes

3.安装 Gulp 包

# 安装 gulp 包，作为开发时依赖项
npm i gulp -D

4.创建 gulpfile 文件

gulpfile 文件是项目根目录下的 gulpfile.js，在运行 gulp 命令时会被自动加载。在这个文件中，你经常会看到类似 src()、dest()、series() 或 parallel() 函数之类的 Gulp API，除此之外，纯 JavaScript 代码或 Node.js 模块也会被使用。任何导出（ exports ）的函数都将注册到 Gulp 的任务（task）系统中。

# 创建任务，任务结束后，需要通过回调函数去标记
exports.foo = () => {
  console.log('foo task is running')
}

5.在 gulpfile.js 中注册 Gulp 任务

# 创建任务，并导出任务
exports.foo = cb => {
  console.log('foo task is running')
    
  cb()
}

# 旧版 Gulp 注册任务的语法（无需执行导出操作）
gulp.task('foo', function(cb) {
  console.log('foo task is running')
    
  cb()
});

6.运行 Gulp 任务

# 运行 foo 任务
# 如需运行多个任务（task），可以执行 gulp <task> <othertask>
gulp foo

7.创建默认任务

# 默认任务的名称是 default
exports.default = cb => {
    console.log('default task is running')
    
    cb()
}

# 运行默认任务, gulp 后无需指定任务名称
gulp # 效果等同于 gulp default

组合任务

Gulp 提供了两个强大的组合方法： series() 和 parallel()

如果需要让任务（task）按顺序执行，请使用 series() 方法（相当于 npm scripts 中的 && ）。

如果希望任务（tasks）并行执行，可以使用 parallel() 方法将它们组合起来（相当于 npm scripts 中的 & ）。

const gulp = require('gulp')

const task1 = cb => {
  setTimeout(() => {
    console.log('Task 1 is running')
    cb()
  }, 1000)
}

const task2 = cb => {
  setTimeout(() => {
    console.log('Task 2 is running')
    cb()
  }, 1000)
}

const task3 = cb => {
  setTimeout(() => {
    console.log('Task 3 is running')
    cb()
  }, 1000)
}

# 串行方式执行任务，先执行task1， 然后执行task2， 然后执行task3
exports.foo = gulp.series(task1, task2, task3)

# 并行方式执行任务，同时执行task1，task2，task3
exports.bar = gulp.parallel(task1, task2, task3)

# 执行命令
gulp foo # 串行执行
gulp bar # 并行执行

series() 和 parallel() 可以被嵌套到任意深度。通过这两个函数，构建任务可以被任意排列组合，从而满足各种复杂的构建需求。

文件操作

gulp 暴露了 src() 和 dest() 方法用于处理计算机上存放的文件。在代码构建过程中，需要将源文件，写入到目标目录。

# 通过 解构 的方式引入 gulp 中的函数
const { src, dest } = require('gulp')

exports.default = () => {
  // 文件操作
  // 将 src/styles 目录下的 main.css 文件，复制到 dist/styles 目录下
  return src('src/styles/main.less', { base: 'src' }).pipe(dest('dist'))
}

# 执行命令
gulp default
# 或直接执行
gulp