Gulp介绍，基本使用Gulp.js是一个自动化构建工具，开发者可以使用它来自动化项目开发过程中的常见任务。gulp-cli将在安装yarnaddgulp时安装。在gulpfile.js中导出了一个函数。最新的gulp取消了同步代码模式，每个任务都是一个异步任务。最后，需要调用回调函数或通过其他方式标记任务完成。比如例子中没有done，就会报错。如果任务名是default，运行时的命令类似于grunt，直接运行yarngulp即可。exports.foo=done=>{console.log("footask")done()//表示任务完成}Gulp4.0仍然保留了上一版本的任务导出方式，但不再推荐这种方式,推荐使用gulpconstgulp=require('gulp')gulp.task('bar',done=>{console.log("bartask")done()})串联、并联组合的方式taskgulp可以传series，parallel用来组合任务，series串行执行，parallel并行执行。比如js和css可以在编译的时候并行执行。基本用法如下const{series,parallel}=require('gulp')consttask1=done=>{setTimeout(()=>{console.log("task1working")done()},1000);}consttask2=done=>{setTimeout(()=>{console.log("task2working")done()},1000);}consttask3=done=>{setTimeout(()=>{console.log("task3working")done()},1000);}exports.foo=series(task1,task2,task3)exports.bar=parallel(task1,task2,task3)serialparallel异步任务常见异步流程操作示例//回调方式exports.callback=done=>{console.log("callbacktask")done()}exports.callback_error=done=>{console.log("callbacktask")done(newError("taskfailed"))}//promise模式exports.promise=done=>{console.log("promisetask")returnPromise.resolve()}exports.promise_error=()=>{console.log("promisetask")returnPromise.reject(newError('taskfailed'))}//asyncawait语法糖方法//包装一个setTimeout作为promise方法consttimeout=time=>{returnnewPromise(resolve=>{setTimeout(resolve,time)})}exports.async=async()=>{awaittimeout(1000)console.log("asynctask")}constfs=require("fs")exports.stream=()=>{constreadStream=fs.createReadStream("package.json")//读取文件流constwriteStream=fs.createWriteStream("tmp.txt")//写入Intothefilestream//pipe方式导入到writestream中，类似于将水从一个池子倒到另一个池子里}exports.stream=done=>{constreadStream=fs.createReadStream("package.json")//读取文件流constwriteStream=fs.createWriteStream("tmp.txt")//写入文件流readStream.pipe(writeStream)//这个方法也可以正常结束，也就是说gulp中只注册了事件监听任务。readStream.on('end',()=>{done()})}gulp的核心工作原理是流式构建系统，实现了一种构建管道的方式使用底层node文件流api模拟工作流的例子：输入（读流）->处理（转换流）->输出（写流）实现css压缩constfs=require('fs')const{Transform}=require('stream')//模拟css文件压缩exports.default=()=>{//文件读取流constread=fs.createReadStream('normalize.css')//文件写入流constwrite=fs.createWriteStream('normalize.min.css')//文件转换流consttransform=newTransform({transform:(chunk,encoding,callback)=>{//核心转换流程实现//chunk=>readstream读取内容(Buffer)constinput=chunk.toString()constoutput=input.replace(/\s+/g,"").replace(/\/\*.+?\*\//g,"")//替换空白字符，然后替换注释callback(null,output)}})//将读文件流导入写流read.pipe(transform)//transform.pipe(write)//writereturnread}fileoperationgulp's文件流操作API比node的更强大，更易用，文件处理的转换流使用独立的插件。gulp创建构建任务的过程，首先通过src创建一个读流，使用插件的转换流实现文件处理，最后通过gulp提供的dest方法创建一个写流，写入到目标中文件。以上面压缩的css文件为例，用gulp的api实现示例如下。需要引入两个插件yarnaddgulp-clean-cssyarnaddgulp-rename代码更简洁明了const{src,dest}=require('gulp')constcleanCss=require('gulp-clean-css')constrename=require('gulp-rename')exports.default=()=>{//returnsrc('src/normalize.css').pipe(dest('dist'))//gulp的api更强大，可以使用通配符.pipe(dest('dist'))//管道到dist目录}
