gulp的基本使用

● 安装：yarn add gulp --dev
● 根目录创建gulpfile.js作为gulp的入口文件
○ 文件中导出函数作为任务
○ 任务为异步操作
○ 执行完调用传入的回调告诉gulp任务结束

exports.foo = done=>{
  //执行的操作
  console.log('foo')
  //调用回调，结束任务
  done()
}

○ 执行yarn gulp foo即可调用任务

● 串行任务和并行任务
○ 可以通过串行和并行决定多个任务是依次执行还是并列执行

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

const foo1 = done=>{
  //执行的操作
  console.log('foo1')
  //调用回调，结束任务
  done()
}

const foo2 = done =>{
  setTimeout(() => {
      console.log('foo2')
      done()
  }, 1000);
}

const foo3 = done =>{
  setTimeout(() => {
      console.log('foo3')
      done()
  }, 1000);
}

//串行
exports.foo = series(foo1,foo2,foo3)
//并行
exports.bar = parallel(foo1,foo2,foo3)

● 常见的工程化任务中，有一项是将js、css代码打包压缩，减少体积，利用Node也可以简单实现

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

//导出一个默认任务
exports.default = ()=>{
  //文件读取流
  const read = fs.createReadStream("./css/index.css")
  //创建文件写入流
  const write = fs.createWriteStream("./css/index.min.css")
  //创建文件转换流
  const transform = new Transform({
      transform:(chunk,encoding,callback)=>{
          //核心转换过程
          //chunk读取流中的内容，buffer格式
          const input = chunk.toString()
          //去除空格和注释
          const output = input.replace(/\s+/g,'').replace(/\/\*.+?\*\//g,'')
          //回调，错误优先
          callback(null,output)
      }
  })
  //把读取出来的文件流导入到写入流
  read
      .pipe(transform)
      .pipe(write)
      //返回写入结果，标识任务结束
  return read;
}

● gulp中有很多文件读取的api，也可以代替node实现上述功能
○ yarn add gulp-clean-css --dev安装文件压缩模块
○ yarn add gulp-rename --dev安装文件重命名模块

const {src,dest} = require("gulp")
const cleanCss = require("gulp-clean-css")
const rename = require("gulp-rename")

exports.default =()=>{
  //读入css下所有css文件
  return src("css/*.css")
  .pipe(cleanCss())
  .pipe(rename({extname:'.min.css'}))
  //写入到dist文件夹下
  .pipe(dest('dist'))
}