自动化构建-Gulp

相比Grunt简单高效，基于流的构建系统, Gulp官网

基本使用

npm install --global gulp-cli
cd my-project
npm init
npm install --save-dev gulp
// 根目录下创建一个名为 gulpfile.js 的文件

// gulpfile.js  入口文件
// // 导出的函数都会作为 gulp 任务
exports.foo = done => {  // gulp foo => foo task working~
    console.log('foo task working~')
    done() // 标识任务执行完成
  }
// done()表明gulp都是异步的

// default 是默认任务
// 在运行是可以省略任务名参数
exports.default = done => { // gulp => default task working~
    console.log('default task working~')
    done()
 }
// 4.0版本前用法是task，不太一样

组合任务

并行，串行任务

const { series, parallel } = require('gulp')

const task1 = done => {
  setTimeout(() => {
    console.log('task1 working~')
    done()
  }, 1000)
}

const task2 = done => {
  setTimeout(() => {
    console.log('task2 working~')
    done()
  }, 1000)  
}

const task3 = done => {
  setTimeout(() => {
    console.log('task3 working~')
    done()
  }, 1000)  
}

// 让多个任务按照顺序依次执行
exports.foo = series(task1, task2, task3)

// 让多个任务同时执行
exports.bar = parallel(task1, task2, task3)
// 编译css和js就是互不干扰的，可并行

异步任务

const fs = require('fs')
// 第一种=================================
exports.callback = done => {
  console.log('callback task')
  done()
}

exports.callback_error = done => {
  console.log('callback task')
  done(new Error('task failed')) // 抛出错误后，后续不会再工作
}
// 第二种=================================
exports.promise = () => {
  console.log('promise task')
  return Promise.resolve()
}

exports.promise_error = () => {
  console.log('promise task')
  return Promise.reject(new Error('task failed'))
}
// 第三种=================================
const timeout = time => {
  return new Promise(resolve => {
    setTimeout(resolve, time)
  })
}

exports.async = async () => {
  await timeout(1000)
  console.log('async task')
}
// 第四种====常用=============================
exports.stream = () => {
  const read = fs.createReadStream('yarn.lock')
  const write = fs.createWriteStream('a.txt')
  read.pipe(write)
  return read
}

// exports.stream = done => {
//   const read = fs.createReadStream('yarn.lock')
//   const write = fs.createWriteStream('a.txt')
//   read.pipe(write)
//   read.on('end', () => {
//     done()
//   })
// }

构建过程核心工作原理

其实过程就是：读取文件=>转换=>写入
比如我们实现一个压缩css的过程

const fs = require('fs')
const { Transform } = require('stream')

exports.default = () => {
  // 文件读取流
  const readStream = fs.createReadStream('normalize.css')

  // 文件写入流
  const writeStream = fs.createWriteStream('normalize.min.css')

  // 文件转换流
  const transformStream = new Transform({
    // 核心转换过程
    transform: (chunk, encoding, callback) => {
      const input = chunk.toString()
      const output = input.replace(/\s+/g, '').replace(/\/\*.+?\*\//g, '')
      callback(null, output)
    }
  })

  return readStream
    .pipe(transformStream) // 转换
    .pipe(writeStream) // 写入
}

可以看出过程就是，读取流-转换流-写入流

gulp文件操作API

使用gulp提供的API，还是压缩css的过程

const { src, dest } = require('gulp')
// src是gulp提供的读取流，dest是gulp提供的写入流
const cleanCSS = require('gulp-clean-css')
// gulp插件，压缩css代码
const rename = require('gulp-rename')
// gulp插件，重命名

exports.default = () => {
  return src('src/*.css') // gulp提供的API更强大，有通配符的功能
    .pipe(cleanCSS())
    .pipe(rename({ extname: '.min.css' }))
    .pipe(dest('dist'))
}

案例

包含样式编译，脚本编译，页面模版编译，图片文字转换，压缩，本地开发服务器，监视变化以及构建优化，useref文件引用处理
demo地址

FIS
一款高度集成的前端构建工具，把常见的任务都集成在内部，开发者就可以通过简单的配置，完成构建工作