相比Grunt簡單高效，基于流的構(gòu)建系統(tǒng), Gulp官網(wǎng)

基本使用

npm install --global gulp-cli
cd my-project
npm init
npm install --save-dev gulp
// 根目錄下創(chuàng)建一個名為 gulpfile.js 的文件

// gulpfile.js  入口文件
// // 導(dǎo)出的函數(shù)都會作為 gulp 任務(wù)
exports.foo = done => {  // gulp foo => foo task working~
    console.log('foo task working~')
    done() // 標(biāo)識任務(wù)執(zhí)行完成
  }
// done()表明gulp都是異步的

// default 是默認(rèn)任務(wù)
// 在運(yùn)行是可以省略任務(wù)名參數(shù)
exports.default = done => { // gulp => default task working~
    console.log('default task working~')
    done()
 }
// 4.0版本前用法是task，不太一樣

組合任務(wù)

并行，串行任務(wù)

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)  
}

// 讓多個任務(wù)按照順序依次執(zhí)行
exports.foo = series(task1, task2, task3)

// 讓多個任務(wù)同時執(zhí)行
exports.bar = parallel(task1, task2, task3)
// 編譯css和js就是互不干擾的，可并行

異步任務(wù)

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')) // 拋出錯誤后，后續(xù)不會再工作
}
// 第二種=================================
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()
//   })
// }

構(gòu)建過程核心工作原理

其實過程就是：讀取文件=>轉(zhuǎn)換=>寫入
比如我們實現(xiàn)一個壓縮css的過程

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

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

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

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

  return readStream
    .pipe(transformStream) // 轉(zhuǎn)換
    .pipe(writeStream) // 寫入
}

可以看出過程就是，讀取流-轉(zhuǎn)換流-寫入流

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更強(qiáng)大，有通配符的功能
    .pipe(cleanCSS())
    .pipe(rename({ extname: '.min.css' }))
    .pipe(dest('dist'))
}

案例

包含樣式編譯，腳本編譯，頁面模版編譯，圖片文字轉(zhuǎn)換，壓縮，本地開發(fā)服務(wù)器，監(jiān)視變化以及構(gòu)建優(yōu)化，useref文件引用處理
demo地址

FIS
一款高度集成的前端構(gòu)建工具，把常見的任務(wù)都集成在內(nèi)部，開發(fā)者就可以通過簡單的配置，完成構(gòu)建工作