平凡的生活，不平凡的人生 主页文章标签分类Flutter
Gulp使用指南
|技术

gulp是一个打包工具。基于流的自动化打包构建工具。

  • 简单：代码优于配置、node 最佳实践、精简的 API 集，gulp 让工作前所未有的简单。
  • 高效：基于 node 强大的流(stream)能力，gulp 在构建过程中并不把文件立即写入磁盘，从而提高了构建速度。
  • 生态：遵循严格的准则，确保我们的插件结构简单、运行结果可控。

下面就介绍一下gulp的使用方法

了解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
了解 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 的指令

准备使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
准备使用 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
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'))

常用插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
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')
  => 导入以后得到一个处理流文件的函数
  => 我们再管道函数内调用就可以了, 需要传递参数

打包组件

1
2
3
4
5
6
7
8
9
10
11
gulp 打包组件
  + 场景
    => 把重复的位置单独拿出来, 写成一个 html 片段
    => 单独拿出来的片段可以包含 css 和 js
      -> 也可以不包含
    => 当我压缩 html 的时候
      -> 能再固定位置把我写好的 html 片段引入进来
  + 组件
    => 一段可以包含(css / js)一整套 html 结构片段
    => 把页面的每一部分分成一段一段的 html 片段
    => 最后组装在一起
文章作者: 踏浪
文章链接: https://www.lyt007.cn/技术/Gulp使用指南.html
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 平凡的生活，不平凡的人生！
Gulp
支付宝
微信打赏