Gulp使用介绍

Gulp

Gulp是基于流的构建系统流是异步操作，不需要回调函数（Gulp有一个自己的内存，通过指定 API 将源文件流到内存中，完成相应的操作后再通过相应的 API 流出去）
使用步骤：

1. 使用 Gulp 之前，先在全局安装 gulp-cli

// 卸载 gulp 命令
	npm rm -g gulp-cli
// 安装 gulp 命令行工具
   npm i -g gulp-cli
// 验证安装是否成功
   gulp -v

2. 初始化项目

   //创建项目目录
   mkdir project-name
   // 进入项目目录
   cd project-name
   // 初始化项目
   npm init --yes
   

3. 安装 Gulp 包
 ```js
 // 安装 gulp 包，作为开发时依赖项
 npm i gulp -D

4. 创建 gulpfile 文件
   gulpfile 文件是项目根目录下的 gulpfile.js，在运行 gulp 命令时会被自动加载。在这个文件中，你经常会看到类似 src()、dest()、series() 或 parallel() 函数之类的 Gulp API，除此之外，纯 JavaScript 代码或 Node.js 模块也会被使用。任何导出（ exports ）的函数都将注册到 Gulp 的任务（task）系统中。

   // 创建任务，任务结束后，需要通过回调函数去标记
   exports.foo = () => {
     console.log('foo task is running')
   }
   

删除node_module 文件夹，执行npm install 自动安装package.json中依赖的插件

用ES6中解构方式声明

const {src , data} = require('gulp')

5. 执行构建
   gulp dev

gulp 执行方式

使用parallel()和series()方法来对任务进行排列使其并行或串行执行

const gulp = require('gulp')//引入gulp
const task1 = (cb) => { setTimeout(() => {console.log('Task 1 is running');cb()}, 1000)}
const task2 = (cb) => { setTimeout(() => {console.log('Task 2 is running');cb()}, 1000)}
const task3 = (cb) => { setTimeout(() => {console.log('Task 3 is running');cb()}, 1000)}
// 任务的并行执行
exports.p = gulp.parallel(task1, task2, task3)
// 任务的串行执行
exports.s = gulp.series(task1, task2, task3)

文件构建操作

利用三个内置函数 src() 、pipe()、dest()实现文件流操作
src和dest的参数都是路径，src()函数的第二个参数可以是一个对象，具体可见操作手册。pipe的参数是文件操作

gulp.src('css/index.css')//指定导入文件路径
    .pipe(cleanCSS())
    .pipe(rename({"extname":".min.css"}))//需要安装gulp-rename插件
    .pipe(gulp.dest('dist'))//指定导出文件夹

• CSS兼容性操作
  需要安装

npm i -g gulp-less -D
npm i -g gulp-clean-css -D
npm i -g gulp-rename -D
npm i -g gulp-autoprefixer -D

同一段代码在不同浏览器的加载效果不一样，针对不同浏览器写不同的代码的过程是CSS hack
页面文本不可复制属性 user-select :none 在各个浏览器实现时需要添加不同的前缀，利用Autoprefixer插件根据 can i use中提供的数据实现为特定属性自动添加前缀

• ES6转ES5操作
  利用gulp-babel插件npm i gulp-babel -D，注意需要根据babel的版本安装不同的gulp-babel插件，参数中的规则可以从package.json中找转换规则。

const script = () => {
 return src('src/scripts/*.js', { base: 'src' })
   .pipe(babel({
     presets: [ 'babel-preset-env' ] // 不同版本的 babel，转换规则写法也不同，此方法为babel6版本的书写方式
 	}))

• 构建html文件
  htmlmin的参数需要添加一个对象，折叠空白字符属性为true默认为false
  gulp-htmlmin 插件的解析器是：gulp-htmlmin 插件

const htmlmin = require('gulp-htmlmin')
const html = () => {
  return src('src/*.html', { base: 'src' })
    .pipe(htmlmin({
      collapseWhitespace: true, // 去除标签之间多余的空行和空白
      minifyCSS: true, // 压缩HTML中的CSS代码
      minifyJS: true // 压缩HTML中的JS代码
    }))
    .pipe(dest('temp'))
}

• 图片（字体）文件转换
  对图片文件的构建，主要是指图片的压缩。通过 gulp-imagemin 插件可以完成图片的压缩任务。安装 imagemin 插件
  npm i gulp-imagemin -D

const imagemin = require('gulp-imagemin')

// 图片构建任务
const image = () => {
  return src('src/images/**', { base: 'src' })
    .pipe(imagemin())
    .pipe(dest('dist'))
}
// 图片构建任务，也可以与以上三个任务一起，并行执行
const build = parallel(style, script, html, image)

文件清除

有时候，我们需要删除一些构建的历史文件，然后再重新构建。删除文件操作，可以通过 del 插件完成。通过del插件来删除指定文件
npm i del -D

const del = require('del')
// 声明清除任务
const clean = () => {
  return del(['dist'])//将要删除的文件或文件夹以数组形式存放
}
// 编译之前，先执行clean，删除历史文件
const build = parallel(style, script, html, image)
const dev = series(clean, build)
module.exports = {
  clean,
  dev
}

开发服务器

通过web服务器插件，将 dist 下的代码，发布到浏览器查看效果。发布web服务的插件有很多。安装 browser-sync 插件
npm i browser-sync -D

// 在 gulpfile.js 中添加开发服务器的内容,需要调用一个创建方法
const browserSync = require('browser-sync')
const bs = browserSync.create()
const serve =>(){
//初始化服务
bs.init({
    notify: false,      // 禁用 浏览器 右上角的 browserSync connected 提示框
    server: {
      baseDir: './dist', // 指定服务启动的目录
      routes: {
        '/node_modules': 'node_modules'		//localehost:3000 默认指向dist目录，修改以后指向node_modules目录
      }
    }
  })
}

导入第三方模块库

1. 下载插件
   npm i bootstrap@3.4.1 jquery -S @之后跟版本号
2. 引入文件
   Bootstrap 和 jQuery 下载后npm i boostrap@3 jquery -S，文件位于当前目录的 node_modules 下,上线部署以后需要书写在dist下的路径

//在 HTML 中引入
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
......
<script src="/node_modules/jquery/dist/jquery.min.js"></script>
<script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

热更新

监视 src 下文件变化的页面更新，代码一旦更新，浏览器上的页面效果也随之更新。
此时，我们需要监视两个目录的变化，一个是 dist 目录，一个是 src 目录。
通过 browser-sync 中的 files 字段和通过 gulp 中的 watch 函数分别对dist目录和src目录进行监视

// 在 gulpfile.js 中添加监视文件变化的代码
const serve = () => {
  //语法： watch(被监视的文件，对应的任务)
  watch('src/index.html', html)
  watch('src/styles/*.less', style)
  watch('src/js/*.js', script)
  watch('src/images/**', image)
// 初始化服务
  bs.init({
    notify: false,      // 禁用浏览器右上角的 browserSync connected 提示框
    files: 'dist/**',   // 监视 dist 下 文件的变化，然后在浏览器上实时更新
    server: {
      baseDir: './dist', // 指定服务启动的目录
      routes: {
        '/node_modules': 'node_modules'
      }
    }
  })
}
// 组合任务
const build = parallel(style, script, html, image)
const dev = series(clean, build, serve)
// 导出任务
module.exports = {
  build,
  dev,
  serve
}
# 运行命令，更新代码文件，查看页面变化
gulp dev