gulp简介,根本应用
Gulp.js 是一个自动化构建工具,开发者能够应用它在我的项目开发过程中主动执行常见工作。
yarn add gulp 装置gulp的时候会装置gulp-cli。gulpfile.js中导出一个函数,最新的gulp中勾销了同步代码模式，每一个工作都是异步工作，最初须要调用回调函数或其余形式标记工作实现。如例子中如果没有done，会报错.如果工作名是default，运行时的命令和grunt相似，间接运行yarn gulp即可。
exports.foo = done => { console.log("foo task") done() // 标识工作实现 }gulp4.0中仍然保留了之前版本的工作导出形式,然而这种形式曾经不举荐，举荐导出函数的形式应用gulp
const gulp = require('gulp') gulp.task('bar', done => { console.log("bar task") done() })series,parallel组合工作
gulp能够通过series,parallel来组合工作，series串行执行,parallel并行执行，比方js,css在编译时就能够并行执行，比方部署工作时先要执行编译工作再进行其余工作，工作串行执行。根本应用形式如下
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 task") done(new Error("task failed"))}// promise形式exports.promise = done => { console.log("promise task") return Promise.resolve()}exports.promise_error = () => { console.log("promise task") return Promise.reject(new Error('task failed'))}// async await语法糖形式// 包装一个setTimeout为promise形式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("tmp.txt") // 写入文件流 // pipe形式导入到写入流，相似一个池子往另外一个池子倒水 readStream.pipe(writeStream) // 完结机会就是readStream end的时候,stream都有一个end事件 return readStream}exports.stream = done => { const readStream = fs.createReadStream("package.json") // 读文件流 const writeStream = fs.createWriteStream("tmp.txt") // 写入文件流 readStream.pipe(writeStream) // 这种形式也能失常完结，意味着gulp中只是注册了这个事件监听工作完结 readStream.on('end', () => { done() })}外围工作原理
gulp的官网定义是The streaming build system，实现一个构建管道的形式。
一个利用底层node文件流api模仿工作流:输出(读取流)->加工（转换流）->输入(写入流）
例子实现css压缩
const fs = require('fs')const { Transform} = require('stream')// 模仿css文件压缩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) const input = chunk.toString() const output = input.replace(/\s+/g, "").replace(/\/\*.+?\*\//g, "") // 替换空白字符，而后替换正文 callback(null, output) } }) // 把读取进去的文件流导入到写入流 read .pipe(transform) // 转换 .pipe(write) // 写入 return read}文件操作
gulp的文件流操作API比node的更弱小，更容易应用，文件加工的转换流应用独立插件。gulp创立构建工作的流程，先通过src形式创立读取流，借助插件的转换流实现文件加工,最初通过gulp提供的dest办法来创立一个写入流,写入到指标文件.
下面压缩css文件的例子，用gulp的api实现例子如下
须要引入两个插件
yarn add gulp-clean-cssyarn add gulp-rename代码更为简洁，清晰
const { src, dest} = require('gulp')const cleanCss = require('gulp-clean-css')const rename = require('gulp-rename')exports.default = () => { // return src('src/normalize.css').pipe(dest('dist')) // gulp的api更为弱小，能够应用通配符 return src('src/*.css') .pipe(cleanCss()) // 压缩 .pipe(rename({ extname: '.min.css' })) // 重名令 .pipe(dest('dist')) // pipe到dist目录}