module1_04_gulp

gulp

对于自动化构建工具有grunt、gulp、FIS
- grunt 是最早的前端自动化构建工具，功能很完善，但是构建过程是基于临时文件，所以构建速度比较慢
- gulp 是基于内存实现的，同时其生态也比较完善
- FIS 是百度团队开发的，但是主要为百度来维护

gulp 与 npm scripts

gulp 是 npm script 都能够实现自动化构建
gulp 语法简单、生态完善，效率高
- gulp 语法就是js语法
npm scripts 语法接近 shell 脚本

一、gulp 基础

1. 1 使用gulp的步骤

① 全局安装 gulp 客户端：npm i -g gulp-cli
② 初始化项目：npm init --yes
③ 安装 gulp 包：npm install gulp -D
④ 新建 gulpfile 文件：gulpfile.js
- 需要跟 package.json 在同一目录
⑤ 在 gulpfile.js 中, 创建 gulp 任务
⑤ 执行gulp 任务

example

const task1 = (cb) => {
  console.log('task1...');
  const resultCb = () => {
    cb();
    console.log('cb...', cb);
  }
  resultCb();
}

module.exports = {
  task1
}

得出来的结果
需要传入cb并且回调，目的是新版本gulp需要每一个人物都为异步的，可见上图

旧版本的任务创建为

const gulp = require('gulp');
gulp.task('task3', (cb) => {
    console.log('task3');
    cb();
})

1.2 Gulp 组合任务

相当于npm scripts 的并行执行喝串行执行 & 与 &&
语法：
- 并行执行：gulp.parallel(task1, task2, task3)
- 串行执行：gulp.series(task1, task2, task3)

1.3 文件操作

首先先要了解文件操作的两种方式：缓冲方式、流方式
- 缓冲方式：内存缓冲不够大可能导致文件操作的失败
- 流方式：把一个很大的文件切分成小块，然后给每一个小块做好编码，然后把这些文件小块按照预先执行好的编码组合起来。
而 gulp 的文件操作就是基于流的
- gulp 是基于流的构建系统

（1）什么是流

Gulp 对应的代码操作就相当于流的操作
- 中间的 pipe() 可以使用多次
- 而这若干个 pipe() 操作呢，称为管道流

（2）执行操作

可以通过解构的方式直接获取gulp的方法
- const { src, dest, pipe } = require(gulp)
完成一个基本的流操作（文件不变直接输出）
- 如果设置了复杂的目录结构会发现输出文件并没有按照我们想要的方式输出
- 这时候只需要在 src 方法里面输入第二个参数，{ base: 'src' }，即可根据src的目录结构将文件输出

（3）注意

写流的时候也需要放在一个函数内，如：

const foo = () => {
  return src('src/js/test.js', { base: 'src' }).pipe(dest('dist'));
}

而这里不用回调函数是因为流本身就是异步的

1.4 构建样式文件

（1）所需要的工具

① gulp-less：将 less 转换成 css
② gulp-clean-css：压缩 css 代码
③ gulp-rename：对文件进行重命名

（2）在gulp里面的使用

const { src, pipe, dest }  = require('gulp');
const less = require('gulp-less');
const cleancss = require('gulp-clean-css');
const rename = require('gulp-rename');
const autoprefixer = require('gulp-autoprefixer');

const style = () => {
  return src('src/style/test.less', { base: 'src' })
    .pipe(less())
    .pipe(autoprefixer())
    .pipe(cleancss())
    .pipe(rename({
      dirname: 'foo',
      extname: '.min.css'
    }))
    .pipe(dest('dist'));
}

module.exports = {
  style
}

如果在rename设置了 dirname 则会重置掉 src 的路径

（3）css hack

因为同样的 css 代码在不同浏览器可能会有不一样的呈现效果，所以会出现兼容性问题，而解决这一方案是在 css 属性前面加上特有的前缀
- 浏览器前缀
  
  Chrome -webkit-
  
  Safari -webkit-
  
  IE -ms-
  
  Firefox -moz-
  
  Opera -o-
- 可以在https://caniuse.com/当中找到是否需要添加
而为了解决这一问题就有 Autoprefixer 这一工具
- 在 gulp 构建样式文件步骤中因为在代码压缩钱，转换css之后操作（貌似也可以在转换为 css 之前）

浏览器	前缀
Chrome	-webkit-
Safari	-webkit-
IE	-ms-
Firefox	-moz-
Opera	-o-

1.5 构建脚本文件

（1）所需要的工具

① gulp-babel：将 ES6+ 转换成 ES5
② gulp-uglify：压缩 JS 代码
③ gulp-rename：对文件进行重命名

（2）在 gulp 里面的使用

const { src, pipe, dest } = require('gulp');
const babel = require('gulp-babel');
const rename = require('gulp-rename');
const uglify = require('gulp-uglify');


const babelConfig = {
  presets: ['babel-preset-env']
}

const renameConfig = {
  extname: '.min.js'
}

const script = () => {
  return src('src/**/*.js', { base: 'src' })
    .pipe(babel(babelConfig))
    .pipe(uglify())
    .pipe(rename(renameConfig))
    .pipe(dest('dest'))
}

module.exports = {
  script
}

这里面要注意 babel 的版本问题
- babel6 的版本配置的 presets 是 babel-preset-env
- babel7 的版本配置的 presets 是 @babel/env

1.6 构建 HTML 文件

（1）所需要的工具

面对 html 文件大概所需要用到的就是压缩攻击
- gulp-imagemin

（2）在 gulp 里面运行

const html = () => {
  return src('src/**/*.html', { base: 'src' })
    .pipe(htmlmin(htmlminConfig))
    .pipe(dest('dist'))
}

（3）发现的问题

这里面会发现一个问题，如果html文件里面含有script代码，且里面的是 ES6 的js，那么则会发现没有完全压缩
- 需要找一个可以将含有 ES6 代码的html文件压缩的工具 / 可以把 html 的 script 里面的代码编译成 es5 的工具 / 可以把 html 的 script 代码抽出的工具

1.7 构建图片文件

（1）所需要的工具

$ npm i -D gulp-imagemin

（2）使用方法

const imageminConfig = [
  imagemin.mozjpeg({ quality: 75, progressive: true })
]

const image = () => {
  return src('src/**/*.jpg', { base: 'src' })
    .pipe(imagemin(imageminConfig))
    .pipe(dest('dist'))
}

（3）注意

在下载的时候可能会引入外部插件，因为是在github上面，国内可能会导致下载超时，所以可能需要改 host 配置

路径：C:WindowsSystem32driversetc

# GitHub Start (chinaz.com) =================================================
13.229.188.59 github.com
54.169.195.247 api.github.com
140.82.113.25 live.github.com
8.7.198.45 gist.github.com

# 185.199.108.154 github.githubassets.com
# 185.199.109.154 github.githubassets.com
185.199.110.154 github.githubassets.com
# 185.199.111.154 github.githubassets.com

34.196.247.240 collector.githubapp.com
# 52.7.232.208 collector.githubapp.com
52.216.92.163 github-cloud.s3.amazonaws.com

199.232.96.133 raw.githubusercontent.com
151.101.108.133 user-images.githubusercontent.com

151.101.108.133 avatars.githubusercontent.com
151.101.108.133 avatars0.githubusercontent.com
151.101.108.133 avatars1.githubusercontent.com
151.101.108.133 avatars2.githubusercontent.com
151.101.108.133 avatars3.githubusercontent.com
151.101.108.133 avatars4.githubusercontent.com
151.101.108.133 avatars5.githubusercontent.com
151.101.108.133 avatars6.githubusercontent.com
151.101.108.133 avatars7.githubusercontent.com
151.101.108.133 avatars8.githubusercontent.com
151.101.108.133 avatars9.githubusercontent.com
151.101.108.133 avatars10.githubusercontent.com
151.101.108.133 avatars11.githubusercontent.com
151.101.108.133 avatars12.githubusercontent.com
151.101.108.133 avatars13.githubusercontent.com
151.101.108.133 avatars14.githubusercontent.com
151.101.108.133 avatars15.githubusercontent.com
151.101.108.133 avatars16.githubusercontent.com
151.101.108.133 avatars17.githubusercontent.com
151.101.108.133 avatars18.githubusercontent.com
151.101.108.133 avatars19.githubusercontent.com
151.101.108.133 avatars20.githubusercontent.com
# GitHub End ===================================================================

把这个复制到 hosts 尾部

1.8 清除文件

构建的时候会需要把之前构建出来的东西删除掉，然后再重新构建，可以通过 del 插件来完成

（1）安装

npm i -D del

这里不用加 gulp- 前缀

（2）应用

const clean = () => {
  return del(['dist'])
}

（3）注意

这个可以放在编译之前删除历史文件

二、一些应用

2.1 开发服务器

（1）所用到工具

npm i -D browser-sync

可以看官方文档

（2）在 gulp 中使用

const browserSync = require('browser-sync');
const bs = browserSync.create();

const browserSyncConfig = {
  notify: false,
  server: {
    baseDir: './dist',
    index: 'app.html'
  }
}

const serve = () => {
  return bs.init(browserSyncConfig)
}

notify 是关闭测试用的提示
server 是配置服务器的选项
- baseDir：指向默认目录
- index：选择入口html
- routes：配置路由 =》在输出文件中会进行路由跳转
  - ex：
  - /node_modules：'./node_modules'
    - 表示 html 文件下带有 node_modules 的路径会去到 gulpfiles.js 相对的 ./node_modules之下

2.2 browser-sync 热更新

（1）browser-sync 用法

在browser-sync 的配置项里面添加 files ，表示该目录的文件改动就会实时更新

const browserSyncConfig = {
  notify: false,
  server: {
    baseDir: './dist',
    files: './dist/**' // <= 在这
    index: 'app.html',
    routes: {
      '/node_modules': './node_modules'
    }
  }
}

（2）gulp 的 watch

表示会监听 watch 里面的文件，有变化的话就会重新加载该任务
语法:
- wathc(监听的人文件, 发生变化时候触发的任务)

const serve = () => {
  watch('src/**/*.less', style);
  watch('src/**/*.js', script);
  watch('src/**/*.html', html);
  watch('src/**/*.jpg', image);

  bs.init(browserSyncConfig);
}

2.3 在 yeoman 中的 gulp

回顾我们之前用 yeoman 脚手架搭建的 webapp，不难发现里面的目录结构有 gulpfile.js
项目让我们运行的代码是npm run start 实际上是通过 npm script 调用 gulp 来构建任务的

不难发现 gulp 在脚手架里面也可以灵活应用，列入项目有新技术需要更改的时候可以很方便的直接去更改相关的技术