Gulp使用指南

Local version: Unknown

准备使用 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

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 常用插件
  + 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')
  => 导入以后得到一个处理流文件的函数
  => 我们再管道函数内调用就可以了, 需要传递参数

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