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事件标记结束
    }
    

构建过程核心原理

gulp使用

文件操作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
    
上一篇:2021-03-07


下一篇:【bug日常】安装gulp-clip 时出错!npm ERR! code EAI_AGAIN npm ERR! errno EAI_AGAIN