Gulp 的使用

安装

yarn add gulp

使用

基本使用

在项目根目录添加 gulpfile.js ，这是 gulp 项目的入口文件。gulp只支持异步任务，需要一个回调函数标记任务完成。

exports.foo = done => {
  console.info('foo task working~')
  done()  //标识任务完成
}

default 任务调用无需任务名。

// 调用命令 yarn gulp
exports.default = done => {
  console.log('default task~')
  done()
}

在 gulp 4.0以前的版本，注册任务需要用 gulp 提供的 task 方法。

const gulp = require('gulp');
gulp.task('bar', done => {
  console.info('bar');
  done()
})

组合任务

series 运行串行任务，parallel 运行并行任务。

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)

异步任务

回调方式实现

exports.callback = done => {
  console.log('callback task~')
  done()
}
exports.callback_error = done => {
  console.log('callback task~')  // 不会输出，回调函数是错误优先的
  done(new Error('task failed~')) // 错误优先输出
}

ES6 Promise 实现

exports.promise = () => {
  console.log('promise task~')
  return Promise.resolve()
}
exports.reject = () => {
  console.log('reject task~')    // 不会输出，Promise是错误优先的
  return Promise.reject(new Error('task failed~'))  // 优先输出
}

ES7 async await 实现

const timeout = time => {
  return new Promise(resolve => {
    setTimeout(resolve, time)
  })
}
exports.async = async () => {
  await timeout(1000)
  console.log('async task~')
}

stream 实现

const fs = require('fs')
exports.stream = () => {
  const readStream = fs.createReadStream('package.json')
  const writeStream = fs.createWriteStream('temp.txt')
  readStream.pipe(writeStream)
  return readStream // 触发stream的end事件
}
// End事件的实现
exports.stream1 = done => {
  const readStream = fs.createReadStream('package.json')
  const writeStream = fs.createWriteStream('temp.txt')
  readStream.pipe(writeStream)
  readStream.on('end', () => {
    done()
  })
}

构建过程核心工作原理

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) => {
      // chunk => 读取文件流的内容 (Buffer)
      const input = chunk.toString()
      const output = input.replace(/\s+/g, '').replace(/\/\*.+?\*\//g, '')
      callback(null, output)
    }
  })
  return readStream
    .pipe(transformStream) // 转换
    .pipe(writeStream) // 写入
}

文件操作API

const { src, dest } = require('gulp')   // 获取文件流和写入文件到文件夹的插件
const cleanCss = require('gulp-clean-css')  // 压缩css插件
const rename = require('gulp-rename') // 重命名文件插件
exports.default = () => {
  return src('src/*.css')
    .pipe(cleanCss())
    .pipe(rename({ extname: '.min.css' }))
    .pipe(dest('dist'))
}