Gulp

Grunt装置 yarn add gulp --dev

code gulpfile.js gulp入口文件,编写须要gulp执行的构建工作

yarn gulp 工作名 执行gulp构建

gulpfile.js文件时gulp的入口文件

在最新的gulp中约定每个工作都是异步工作，因而咱们须要标记工作实现通过done参数

exports.foo = done =>{  console.log('foo task working~');  done() //标识工作实现}//默认工作exports.default = done=>{  console.log("default task working~");  done()}//gulp 4.0以前注册一个工作通过,不举荐，举荐下面导出函数成员形式const gulp = require('gulp')gulp.task('bar',done=>{  console.log('bar working~');  done()})

组合工作

例如编译css和js，他们是互不烦扰的，这两个工作能够并行处理，进步构建效率

例如部署，部署的工作须要先执行编译工作，须要通过串行执行工作

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_error task~');  done(new Error('task Failed'))}

promise

exports.promise = ()=>{  console.log('promise task~');  return Promise.resolve() //要返回一个promise对象}exports.promise_error = ()=>{  console.log('promise_error task~');  return Promise.reject(new Error('task Failed')) //要返回一个promise对象}

async await node8以上

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) //read通过pipe形式导入write中,相似于文件复制  return readStream //完结的机会就是readStream END的时候,等同于上面代码}exports.stream = done=>{  const readStream = fs.createReadStream('package.json')   const writeStream = fs.createWriteStream('temp.txt') //写入流  readStream.pipe(writeStream)  readStream.on('end',()=>{ //本质上是监听end事件    done()  })}

Gulp构建过程外围工作原理

对css压缩，用nodeAPI实现

通过在线压缩工具对代码.css进行压缩，再复制到.min.css

https://tool.oschina.net/jsco...

读取流，转换流，写入流

the streaming build system 基于流的构建零碎

const fs = require('fs')const { Transform } = require('stream')exports.default = ()=>{  //文件读取流  const read = fs.createReadStream('normalize.css')  //文件写入流  const write = fs.createWriteStream('normalize.min.css')    //文件转换流  const transform = new Transform({ //    transform:(chunk,encoding,callback)=>{ //外围转换过程      //外围转换过程实现      //chunk => 读取流中读到的内容（Buffer）toString转化程字符串      const input = chunk.toString()       const output = input.replace(/\s+/g,'').replace(/\/\*.+?\*\//g,'')      callback(null,output) //谬误优先，没有谬误传null    }  })  //把读取进去的文件流导入写入文件流  read  .pipe(transform)  .pipe(write)  return read}

Gulp 文件操作API

文件操作API+插件一起应用

相比于底层nodeAPI，gulpAPI更弱小，也更容易应用

转换流个别都是通过插件提供
src().pipe(转换流).pipe(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'))  //导出到dest写入流中  参数写入目标目录}//yarn gulp    文件dist下多出一个css//相比于nodeapi，gulp更弱小，能够增加通配符//yarn add gulp-clean-css --dev 压缩css代码的转换流//yarn add gulp-rename --dev 重命名文件转换流