Gulp前端自动化构建工具

什么是Gulp,为什么使用Gulp

Gulp是基于Node.js 实现web前端自动化构建的工具，它可以自动化高效的构建我们工作中的一些任务,

在 Web 前端开发工作中有很多“重复工作”，比如压缩CSS/JS文件、es6编译成es5，而这些工作都是有规律的。找到这些规律，并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”。

常用的前端构建工具还有: grunt、webpack等.

Gulp入门指南

注意：gulp3版本在node12上已经是被放弃的版本了。既然如此那就升级gulp4吧

1. 项目中安装最新版本的gulp：

npm init -y
npm install gulp-cli -g
npm install gulp -D

我的显示如下：

gulp -v
CLI version: 2.3.0
Local version: 4.0.2

2. 在项目根目录下创建一个名为 gulpfile.js 的配置文件

// gulp3写法
var gulp = require('gulp'); 
gulp.task('default', function() {
    
    // 将你的默认的任务代码放在这
    console.log('执行任务')
   
});

// gulp4写法
const { src, dest } = require('gulp');

function defaulTask(cb) {
    // 将你的默认的任务代码放在这
    console.log('执行任务')
    cb() //cb()用来终止任务
}

exports.default = defaulTask;

gulp4是通过exports的方式创建任务。
语法：

exports.任务名 = 函数名

执行任务:

gulp <task> 

task为任务名, task不写默认为default

Gulp中的src()、dest()、pipe()方法

gulp充分使用了管道思想，就是一个数据流（stream）

• src()：读入文件产生数据流， Gulp .src() 路径匹配模式
• pipe(): 管道方法。可以理解为一根水管，表示对内存中的数据流进行下一步操作。
• dest(): 将数据流写入目标文件。

以上三个方法都是按照以下顺序：

src(原路径)->pipe(任务1)->->pipe(任务2)–>pipe(任务3)–>pipe(任务4)->pipe(dest(目标路径))

正因为gulp帮我们封装好了流，因此，我们可以直接使用pipe这个api来传输数据。

gulp4比gulp3版本多出以下两个函数：

• series(...tasks) ： 串行执行多个任务
• parallel(...tasks)： 并行执行多个任务

例1：将src目录下的index.html文件复制到dist目录中

// gulp3写法
const gulp = require('gulp')
gulp.task("copyHtml",function(){
   
    return gulp.src('src/index.html')
    		  .pipe( gulp.dest('dist') )
})

// gulp4写法
const {
    parallel,series,src,pipe,dest,watch } = require('gulp');
function copyHtml(){
   
    return src('src/index.html')
    		  .pipe( dest('dist') )
}

exports.copyHtml = copyHtml

在根目录执行任务：

gulp copyHtml

gulp4语法：exports.任务名 = 函数名

例2：将src目录下的所有的后缀为.js文件复制到dist目录中的子目录js中

function copyJs(){
   
    return src('lib/*.js')
    		  .pipe( dest('dist/js') )
})

exports.copyJsTask = copyJs;

注意 * 和 ** 的区别

js/*.js：匹配js目录下所有后缀名为js的文件

js/**/*.js：匹配js目录及子孙目录中的所有后缀名为js的文件

Api参考文档

src常用匹配模式

语法：src(globs, [options])

• globs：文件匹配模式(类似正则表达式)，用来匹配文件路径(包括文件名)
• options：为可选参数。一般用不到

Gulp 内部使用了 node-glob 模块来实现其文件匹配功能

// 单匹配模式
src('[abc].js') // 匹配 a.js， b.js， c.js
src('[^abc].js') // 匹配 x.js， y.js

// 排除模式：匹配所有js文件，但排除掉以b开头的js文件。 符号"!"为排除操作