理解与使用自动化构建工具gulp-优快云博客

本文链接：https://blog.youkuaiyun.com/chen_junfeng/article/details/110409214

gulp是一个自动化构建工具，常用于处理静态资源，如搭建web服务器、文件实时重载、预处理器支持、资源优化等。它通过stream进行操作，使用pipe()方法处理数据流。在gulp4中，任务管理有所改变，如task、src、dest、watch等方法提供了灵活的文件操作和任务调度。此外，series和parallel用于控制任务的串行或并行执行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

gulp

什么是gulp
- gulp是一个自动化构建工具，主要用来设定程序自动处理静态资源的工作。简单的说，gulp就是用来打包项目的，常见的有Grunt、Gulp、Webpack三种，Grunt比较老旧，功能少，更新少，插件少。
gulp可以用来做什么
- 搭建web服务器
- 文件保存时自动重栽浏览器
- 使用预处理器如Sass、Less
- 优化资源，比如压缩CSS、JavasScript、压缩图片

gulp的安装

全局安装

npm i gulp@3 -g  //安装3.9.1版本
npm i gulp@4 -g//安装版本号为4的版本 任选其一 两个版本

检查是否安装成功
```
gulp -v
```
安装开发依赖版本，为了项目上线使用
```
npm i gulp@3 -g --save-dev //两种写法都可以
npm i gulp@3 -g -D //
```
=>注意项目依赖版本要与全局安装版本保持一致否则可能出现报错

项目初始化，新建package.json

npm init -y //可以在该文件中找到项目依赖gulp对应的 版本信息

使用gulp

在文件夹根目录下建立一个gulpfile.js文件

这个文件就是配置运行文件，可以检测我们的gulp是否可以正常使用

//先导入我们安装好的gulp模块
var gulp=require("gulp");
//执行验证函数
gulp.task("init",function () {
    console.log("我执行了");
});

执行gulp命令

gulp init //终端打印出。‘我执行了’ ，证明以上操作成功

gulp工作方式

=> gulp实际工作是使用nodejs中的stream来处理的，简单来说，如果需要合并两个文件，就需要讲两个文件都加载进来，然后再处理将文件合并，注意这里加载进来的文件并不是文本形式加载，而是以二进制数据流的方式，也就是steam加载进入。被加载进入的文件是以二进制数据流模式存在的，内容中除了含有文件内容，还包括了文件的地址，文件名等等一系列相关信息。然后再将所有的数据流处理生产新文件。因此这里就用到了nodejs中stream的方法pipe

=>pipe( ) 管道函数

-->所有gulp API 都是基于流

-->管道，可以理解为接收当前流
```
a.pipe(b) //将a写入到b中
gulp.src().pipe(压缩任务).pipe(转码).pipe(gulp.dest('abc'))
```
gulp的方法
- task
  
  作用=>用来定义创建一个任务
  
  语法=>gulp.task(任务名称，任务依赖所需要的前面的任务名数组 , 任务处理函数)
```
gulp.task("one",function () {
    console.log("one");
});
gulp.task("two",["one"],function () {
    console.log("two")
});
```
- src
  
  作用=>用来寻找文件，读取文件数据流
  
  语法=>gulp.src(‘路径信息’)
  
  参数=>参数可以是字符串，也可以是数组，数组中含有多个读取条件
```
gulp.src('./a/b.html')// 找到指定一个文件
 gulp.src('./a/*.html')// 找到指定目录下, 指定后缀的文件
 gulp.src('./a/**')//找指令目录下的所有文件
 gulp.src('./a/** /*')// 找到 a 目录下所有子目录里面的所有文件
 gulp.src('./a/** /*.html')// 找到 a 目录下所有子目录里面的所有 .html 文件
```
  匹配=>
  1. 匹配文件路径中的0个或多个字符，但不会匹配路径分隔符，除非路径分隔符出现在末尾
  2. 匹配路径中的0个或多个目录及其子目录,需要单独出现，即它左右不能有其他东西了。如果出现在末尾，也能匹配文件。也就是能匹配某个目录下所有文件包括其子目录下的所有内容
  3. ? 匹配文件路径中的一个字符(不会匹配路径分隔符)
  4. […] 匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为^或!时，则表示不匹配方括号中出现的其他字符中的任意一个，类似js正则表达式中的用法
  5. !(pattern|pattern|pattern) 匹配任何与括号中给定的任一模式都不匹配的
  6. ?(pattern|pattern|pattern) 匹配括号中给定的任一模式0次或1次，类似于js正则中的(pattern|pattern|pattern)?
  7. +(pattern|pattern|pattern) 匹配括号中给定的任一模式至少1次，类似于js正则中的(pattern|pattern|pattern)+
  8. (pattern|pattern|pattern) 匹配括号中给定的任一模式0次或多次，类似于js正则中的(pattern|pattern|pattern)
  9. @(pattern|pattern|pattern) 匹配括号中给定的任一模式1次，类似于js正则中的(pattern|pattern|pattern)
- dest
  
  作用=>把一个内容放到指定目录内
  
  语法=>gulp.dest(路径信息)
```
gulp.task("init",function () {
    gulp.src("./js/*.js").pipe(gulp.dest("./dist/"))//把接收到的内容放到这个路径下面
});
```
- watch
  
  作用=>监控文件变化，文件一旦发生变化就从新执行后面的处理函数
  
  语法=>gulp.watch(‘监视的文件’，事件处理函数或者事件处理函数名数组)
```
gulp.task("default",function () {
    gulp.watch('js/*.js', function(event){
        console.log(event.type); //变化类型 added为新增,deleted为删除，changed为改变
        console.log(event.path); //变化的文件的路径
    });
});
//这里启动任务后，会开始监视，如果js文件夹下那个文件修改了，或者删除，增加，这里都会打印出来
```
+gulp4

=>在gulp4中所有的前置任务都被修改了，例如task中的数组不再使用，改为series和parallel
- series
  
  作用=>逐个执行多个任务, 前一个任务结束, 第二个任务开始
  
  语法=>gulp.series(任务1, 任务2, 任务3, …)
- parallel
  
  作用=>并行开始多个任务
  
  语法=>gulp.parallel(任务1, 任务2, 任务3, …)