gulp使用

Gulp

基于内存，读写速度快,默认同时执行多个任务，高效易用，使用方式直观易懂

约定每个任务是异步任务，需标记任务完成

简单使用：

yarn add gulp --dev

code gulpfile.js       入口文件

yarn  gulp xxx    运行导出函数 

• 标识任务完成

  / // 导出的函数都会作为 gulp 任务
  // exports.foo = () => {
  //   console.log('foo task working~')
  // }
  
  // gulp 的任务函数都是异步的
  // 可以通过调用回调函数标识任务完成
  exports.foo = done => {
    console.log('foo task working~')
    done() // 标识任务执行完成
  }
  
  // default 是默认任务
  // 在运行是可以省略任务名参数
  exports.default = done => {
    console.log('default task working~')
    done()
  }
  
  // v4.0 之前需要通过 gulp.task() 方法注册任务
  const gulp = require('gulp')
  
  gulp.task('bar', done => {
    console.log('bar task working~')
    done()
  })
  
  

• 组合任务

  const { series, parallel} = require('gulp')  //串行/并行
  
  // 让多个任务按照顺序依次执行
  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'))
  }
  
  
  exports.promise = () => {
    console.log('promise task')
    return Promise.resolve()  //gulp将忽略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')
  }
  
  
  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事件标记结束
  }
  

构建过程核心原理

文件操作API

读取文件： src( )

写入文件： dest( )

主要是对流操作

const { src, dest } = require('gulp')
const cleanCSS = require('gulp-clean-css')
const rename = require('gulp-rename')

exports.default = () => {
  return src('src/*.css')
    .pipe(cleanCSS())
    .pipe(rename({ extname: '.min.css' }))
    .pipe(dest('dist'))
}

插件

• gulp-clean-css

  yarn add gulp-clean-css --dev
  

• gulp-rename

  yarn add gulp-rename --dev
  

插件

• gulp-clean-css

  yarn add gulp-clean-css --dev
  

• gulp-rename

  yarn add gulp-rename --dev