gulp基础详解

gulp

1. 什么是gulp

   • gulp是一个自动化构建工具，主要用来设定程序自动处理静态资源的工作。简单的说，gulp就是用来打包项目的，常见的有Grunt、Gulp、Webpack三种，Grunt比较老旧，功能少，更新少，插件少。

2. gulp可以用来做什么

   • 搭建web服务器
   • 文件保存时自动重栽浏览器
   • 使用预处理器如Sass、Less
   • 优化资源，比如压缩CSS、JavasScript、压缩图片

3. 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对应的 版本信息
     

4. 使用gulp

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

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

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

   • 执行gulp命令

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

5. gulp工作方式

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

   =>pipe( ) 管道函数

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

   ​ -->管道，可以理解为接收当前流

   a.pipe(b) //将a写入到b中
   gulp.src().pipe(压缩任务).pipe(转码).pipe(gulp.dest('abc'))
   

6. 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, …)