Gulp及其插件的使用（详细）

Gulp的使用

一、什么是Gulp

Gulp是 基于Node.js流的前端自动化构建工具，主要用来设定程序自动处理静态资源的工作

gulp中文官网： https://www.gulpjs.com.cn/
插件地址： https://gulpjs.com/plugins/

二、安装Gulp

1. 检查 node、npm 和 npx 是否正确安装

/* 检查node的版本 */
node --version
/* 检查npm版本 */
npm --version
/* 检查npx版本 */
npx --version

2. 删除旧版本(如果存在的话)
   npm rm gulp --global

3. 全局安装gulp-cli (安装一次就好了)
   npm install gulp-cli --global

4. 作为项目的开发依赖（devDependencies）安装：
   npm install gulp --save-dev

5. 使用gulp，先创建一个项目，确保根目录存在 package.json 文件，执行 npm init -y 生成

6. 安装 gulp，作为开发时依赖项
   npm install gulp --save-dev

7. 检查gulp版本
   gulp --version 或 gulp -v

8. 创建 gulpfile 文件
   在项目根目录下创建一个名为 gulpfile.js的配置文件：
   此文件是项目主文件，运行gulp命令时，默认运行 node gulpfile.js

三、gulp 常用API

1.gulp.task 方法用来注册任务

gulp.task(taskName,taskFunction)
/* 
	taskName为任务名 
	taskFunction为任务要执行的回调，任务要执行的代码都写在里面
*/

/* 注册任务1 */
var gulp = require('gulp');
gulp.task('task1',function (done) {
   
	console.log('执行任务1')；
	done();// 异步任务完成
})
/* 注册任务2 */
var gulp = require('gulp');
function task2(done){
   
    console.log('执行task2');
    done(); //异步任务完成
}
exports.task2 = task2 //注册任务task2
module.exports = {
    task2 } //注册任务task2

在以前的 gulp 版本中，task() 方法用来注册任务（task）。
虽然这个 API 依旧是可以使用的，但是 导出（export）将会是主要的注册机制，除非遇到 export 不起作用的情况。

2.gulp.src 创建一个流，用于从文件系统读取元数据对象(用来 读取/引入 文件)

gulp.src(globs[, options])
globs参数 是文件匹配模式(类似正则表达式)，当然也可以直接指定某个具体的文件路径。当有多个匹配模式时，该参数为一个数组。
options为可选参数，通常不需要用到。

gulp.src('./js/a.js'); // 读取一个文件
gulp.src('./js/*.js'); // 读取js目录下的所有js文件
gulp.src('./js/**/*.js'); // 读取js目录及子目录下的所有js文件
gulp.src(['./js/a.js','./js/b.js']); // 读取两个匹配的文件
gulp.src(['./js/*.js','!./js/b.js']); // 读取js目录下的所有js文件，除了b.js文件

3.gulp.dest 创建一个流，用于将元数据对象写入到文件系统（写入/设置/输出 文件放置目录）

gulp.dest(path[,options])
/* 
	path 将写入文件的输出目录的路径。
	options 为可选参数，通常不需要用到。
*/

/*
	读取文件流（gulp.src），通过管道（pipe），
	把文件流写入（gulp.dest）当前目录下的 dist 文件夹中
*/
var gulp = require('gulp');
gulp.task('mytask',async ()=>{
   
    gulp.src("./js/a.js")
    .pipe(gulp.dest("./dist"));
});

4.gulp.watch 监听 globs 并在发生更改时运行任务

gulp.watch(globs[, options], [tasks])
/* 
	globs 为要监视的文件匹配模式，规则和用法与gulp.src()方法中的globs相同。
	options 为可选参数，通常不需要用到。
	tasks 为文件变化后要执行的一个函数，由 series() 和 parallel() 生成的组合任务
*/

gulp