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的一些常用API

  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 常用插件

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