gulp（6z2）

了解 gulp

+ 前端自动化打包构建工具
=> 打包: 把文件压缩, 整合, 移动, 混淆

了解一下前端的打包构建工具
+ gulp: 基于流的打包构建工具
+ webpack: 基于 js 文件的打包构建工具

什么是流
+ 流文件: 流
=> 一种文件传输的格式
=> 一段一段的文件传输
+ 流格式: 流
=> 从头到尾的一个过程
=> 需要从 源 开始一步一步经过加工
-> 每一个步骤需要依赖上一步的结果
-> 最终给出一个完整的成品
+ gulp 是基于流格式的一种打包构建工具

gulp 的依赖环境
+ 依赖于 node 环境进行开发
+ 底层封装的内容就是 node 里面的读写文件

gulp 的作用
+ 对于 css 文件
=> 压缩
=> 转码(自动添加前缀)
+ 对于 js 文件
=> 压缩
=> 转码(ES6 转 ES5)
+ 对于 html 文件
=> 压缩
=> 转码(对格式的转换)
+ 对于静态资源文件的处理
+ 对于第三方文件的处理
+ ...

gulp 的安装
+ 是一个 JavaScript 相关的工具
+ 就可以直接使用 npm 进行安装
+ 需要安装再你的电脑环境里面, 一次安装多次使用
+ 打开命令行, 输入指令
=> $ npm install --global gulp
=> MAC: $ sudo npm install --global gulp
gulp 的检测
+ 打开命令行, 输入指令
=> $ gulp --version
=> CLI version: 2.3.0
Local version: Unknown
gulp 的卸载
+ 打开命令行, 输入指令
=> $ npm uninstall --global gulp

gulp 的版本
+ gulp@3
=> 安装成功检测版本号, gulp 3.9.1
+ gulp@4
=> 安装成功检测版本号, gulp cli 2.3.0

gulp 全局工具安装完毕
+ 能给你的电脑提供一个启动 gulp 的环境
+ 私人: 可以再 cmd 里面运行 gulp xxx 的指令

准备使用 gulp

+ 作用: 帮我们打包自己的项目

1. 准备一个项目
+ 需求: 你要确定好自己的目录结构
你要分开源码和打包以后的内容
+ 确定自己的目录结构
- xiaomi
- src 源码
+ pages html
+ css css
+ js js
+ sass sass
+ images 图片
+ videos 视频
+ audios 音频
+ lib 第三方文件(jquery, swiper, ...)
+ fonts 字体图标文件
2. 准备一个 gulpfile.js 的文件
+ 必须有
+ gulp 进行打包的依据
+ 每一个项目需要一个 gulpfile.js
+ 我们再这个文件里面进行本项目的打包配置
+ gulp 再运行的时候, 会自动读取 gulpfile.js 文件里面的配置
+ 按照你再 gulpfile.js 文件里面的配置进行打包工作
+ 注意: **直接写在项目根目录, 和 src 同级**
3. 再项目里面再次安装 gulp
+ 注意: **项目里面的 gulp 是以第三方模块的形式出现的**
+ 专门给你提供配置打包流程的 API 的
+ 每一个项目都要安装一次
+ 打开命令行, 切换到项目目录
=> 输入指令 $ npm install gulp -D
4. 再 gulpfile.js 里面书写配置文件
+ 书写你该项目的打包流程
+ 书写完毕以后, 按照打包流程去执行 gulp 指令运行 gulpfile.js 文件

gulp

1. 全局依赖环境 gulp
+ 一台电脑安装一次, 以后使用就可以了
+ 再命令行提供 gulp xxx 的能力
+ 指令 $ npm install --global gulp
2. 项目依赖第三方 gulp
+ 每一个项目都要安装一次
+ 作为第三方包出现, 在你导入以后, 可以使用 gulp.xxx() 方法
+ 切换到项目目录, 输入指令 $ npm install gulp

package.json 记录的第三方依赖
+ dependencies
=> 表示的你项目的 项目依赖
=> 比如 jquery, swiper
=> 指项目运行需要用到的内容, 将来上线以后也需要用到的内容
+ devDependencies
=> 表示的你项目的 开发依赖
=> 比如 gulp
=> 指项目开发阶段需要用到的内容, 将来上线以后不需要用到的

gulp 第三方包最好是放在 devDependencies
+ 在你安装第三方依赖的时候, 书写 $ npm install --dev 包名
+ 就会把依赖项记录再 devDependencies

gulp 的常用 API

+ 前提: 下载 gulp 第三方, 导入以后使用

1. gulp.task()
=> 语法: gulp.task(任务名称, 任务处理函数)
=> 作用: 创建一个基于流的任务
=> 例子: gulp.task('htmlHandler', function () {
// 找到 html 源文件, 进行压缩, 打包, 放入指定目录
})

2. gulp.src()
=> 语法: gulp.src(路径信息)
=> 作用: 找到源文件
=> 书写方式
2-1. gulp.src('./a/b.html')
-> 找到指定一个文件
2-2. gulp.src('./a/*.html')
-> 找到指定目录下, 指定后缀的文件
2-3. gulp.src('./a/**')
-> 找到指令目录下的所有文件
2-4. gulp.src('./a/** /*')
-> 找到 a 目录下所有子目录里面的所有文件
2-5. gulp.src('./a/** /*.html')
-> 找到 a 目录下所有子目录里面的所有 .html 文件

3. gulp.dest()
=> 语法: gulp.dest(路径信息)
=> 作用: 把一个内容放入指定目录内
=> 例子: gulp.dest('./abc')
-> 把他接收到的内容放到 abc 目录下

4. gulp.watch()
=> 语法: gulp.watch(路径信息, 任务名称)
=> 作用: 监控指定目录下的文件, 一旦发生变化, 从新执行后面的任务
=> 例子: gulp.watch('./src/pages/*.html', htmlHandler)
-> 当指定目录下的 html 文件发生变化, 就会执行 htmlHandler 这个任务

5. gulp.series()
=> 语法: gulp.series(任务1, 任务2, 任务3, ...)
=> 作用: 逐个执行多个任务, 前一个任务结束, 第二个任务开始

6. gulp.parallel()
=> 语法: gulp.parallel(任务1, 任务2, 任务3, ...)
=> 作用: 并行开始多个任务

7. pipe()
=> 管道函数
=> 所有的 gulp API 都是基于流
=> 接收当前流, 进入下一个流过程的管道函数
=> 例子:
gulp.src().pipe(压缩任务).pipe(转码).pipe(gulp.dest('abc'))

gulp 打包组件

+ 场景
=> 把重复的位置单独拿出来, 写成一个 html 片段
=> 单独拿出来的片段可以包含 css 和 js
-> 也可以不包含
=> 当我压缩 html 的时候
-> 能再固定位置把我写好的 html 片段引入进来
+ 组件
=> 一段可以包含(css / js)一整套 html 结构片段
=> 把页面的每一部分分成一段一段的 html 片段
=> 最后组装在一起