gulp

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.callbackerror = 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 重命名文件转换流