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