了解
了解 gulp
- 前端自动化打包构建工具 => 打包: 把文件压缩, 整合, 移动, 混淆
了解一下前端的打包构建工具
- gulp: 基于流的打包构建工具
- webpack: 基于 js 文件的打包构建工具
什么是流
- 流文件: 流 => 一种文件传输的格式 => 一段一段的文件传输
- 流格式: 流 => 从头到尾的一个过程 => 需要从 源 开始一步一步经过加工 -> 每一个步骤需要依赖上一步的结果 -> 最终给出一个完整的成品
- gulp 是基于流格式的一种打包构建工具
gulp 的依赖环境
- 依赖于 node 环境进行开发
- 底层封装的内容就是 node 里面的读写文件
gulp 的作用
- 对于 css 文件 => 压缩 => 转码(自动添加前缀)
- 对于 js 文件 => 压缩 => 转码(ES6 转 ES5)
- 对于 html 文件 => 压缩 => 转码(对格式的转换)
- 对于静态资源文件的处理
- 对于第三方文件的处理
- …
gulp 的安装
是一个 JavaScript 相关的工具
就可以直接使用 npm 进行安装
需要安装再你的电脑环境里面, 一次安装多次使用
打开命令行, 输入指令=>
$ sudo npm install --global
打开命令行, 输入指令=>
代码语言：javascript复制Local version: Unknown打开命令行, 输入指令=>
gulp 的版本
- gulp@3 => 安装成功检测版本号, gulp 3.9.1
- gulp@4 => 安装成功检测版本号, gulp cli 2.3.0
gulp 全局工具安装完毕
- 能给你的电脑提供一个启动 gulp 的环境
- 私人: 可以再 cmd 里面运行 gulp xxx 的指令
准备使用
代码语言：javascript复制准备使用 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 文件
源码和打包以后的内容
pages/index.html 开发源码
打包完毕放在哪 ?
同级目录下, 再次新建一个叫做 pages 的文件夹
=> 不行 ? 不能创建同名文件夹
同级目录下, 创建一个叫做 views 的文件
=> 不行 ?
必须要保证打包前后的目录结构一致
=> 创建一个叫做 src 的目录(表示源码)
=> 创建一个叫做 dist 的目录(存放打包后的文件)
*/
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常用Api
代码语言：javascript复制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'))常用插件
代码语言：javascript复制gulp 常用插件
gulp 的各种插件就是用来执行各种各样的压缩混淆转码任务的
1. gulp-cssmin
=> 下载: npm i gulp-cssmin -D
=> 导入: const cssmin = require('gulp-cssmin')
=> 导入以后得到一个处理流文件的函数
=> 直接再管道函数里面执行就好了
2. gulp-autoprefixer
=> 下载: npm i gulp-autoprefixer -D
=> 导入: const autoPrefixer = require('gulp-autoprefixer')
=> 导入以后得到一个处理流文件的函数
=> 直接再管道函数里面使用, 需要传递参数
-> { browsers: [要兼容的浏览器] }
3. gulp-sass
=> 下载: npm i gulp-sass -D
-> 很容易报错, 基本下载不成功
-> 为什么: 因为 gulp-sass 依赖另一个第三方, node-sass
=> node-sass 很难下载成功
=> 以前都是再一个地方下载, 后来 node-sass 自己单独有一个下载地址
=> 如果你不进行单独的 node-sass 下载地址配置, 就很容易失败
-> 解决: 给 node-sass 单独配置一个下载地址
=> 下载 node-sass 从这个单独的地址下载, 下载其他的东西还是统一地址
-> node-sass 单独下载地址
=> $ set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/
=> 单独配置一个下载地址, 只有下载 node-sass 的时候会使用
-> 过程
1. $ set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/
2. $ npm i node-sass -D
3. $ npm i gulp-sass -D
=> 导入: const sass = require('gulp-sass')
=> 导入以后得到一个可以处理流文件的函数, 直接再管道函数里面执行就可以了
4. gulp-uglify
=> 把 JS 文件压缩的
=> 下载: npm i -D gulp-uglify
=> 导入: const uglify = require('gulp-uglify')
=> 导入以后得到一个可以处理流文件的函数
=> 直接再管道函数中使用就可以了
=> 注意: 你不能写 ES6 语法, 一旦有了 ES6 语法就会报错
5. gulp-babel
=> 专门进行 ES6 转 ES5 的插件
=> gulp-babel 的版本
-> gulp-babel@7: 大部分使用再 gulp@3 里面
-> gulp-babel@8: 大部分使用再 gulp@4 里面
=> 下载:
-> gulp-babel 需要依赖另外两个包, 我们要一起下载
-> 另外两个包: @babel/core @babel/preset-env
=> 导入:
-> 只要导入一个包就够了, 他会自动导入另外两个包
-> const babel = require('gulp-babel')
=> 导入以后得到一个可以处理流文件的函数
=> 直接再管道函数内部使用, 需要传递参数
6. gulp-htmlmin
=> 下载: npm i -D gulp-htmlmin
=> 导入: const htmlmin = require('gulp-htmlmin')
=> 导入以后得到一个可以处理流文件的函数
=> 直接再管道函数里面调用, 需要传递参数
7. del
=> 下载: npm i -D del
=> 作用: 删除文件目录
=> 导入: const del = require('del')
=> 导入以后得到一个函数, 直接使用传递参数就可以了
8. gulp-webserver
=> 作用: 启动一个基于 node 书写的服务器
=> 下载: npm i -D gulp-webserver
=> 导入: const webserver = require('gulp-webserver')
=> 导入以后得到一个处理流文件的函数
=> 我们再管道函数内调用就可以了, 需要传递参数
9. gulp-file-include
=> 作用: 再一个 html 页面里面导入一个 html 片段
=> 下载: npm i -D gulp-file-include
=> 导入: const fileInclude = require('gulp-file-include')
=> 导入以后得到一个处理流文件的函数
=> 我们再管道函数内调用就可以了, 需要传递参数打包组件
代码语言：javascript复制gulp 打包组件
场景
=> 把重复的位置单独拿出来, 写成一个 html 片段
=> 单独拿出来的片段可以包含 css 和 js
-> 也可以不包含
=> 当我压缩 html 的时候
-> 能再固定位置把我写好的 html 片段引入进来
组件
=> 一段可以包含(css / js)一整套 html 结构片段
=> 把页面的每一部分分成一段一段的 html 片段
=> 最后组装在一起
