一. gulp
gulp是目前最流行的构建工具之一,利用gulp以及其丰富的插件,可以实现强大的项目构建功能,比如scss编译、js编译、文件压缩、开发中热更新、打包等功能。
本文仅简单介绍一下gulp定义任务的几种方式。
后续文章专门记录一下gulp来实现项目构建的具体做法。
二. 使用gulp定义任务(单任务、串行任务、并行任务)并执行
1. 初始化package.json:
npm init -y
2. 安装gulp为开发依赖:
cnpm install gulp --save-dev
3. 添加 gulpfile.js,该文件用于定义gulp任务:
touch gulpfile.js
4. 在gulpfile.js中定义任务:
// 定义一个任务foo,通过 yarn gulp foo 执行
exports.foo = done => {
console.log('foo task working')
done() // 标识任务完成
}
// 定义默认任务,通过 yarn gulp 执行
exports.default = done => {
console.log('default task work')
done()
}
/* gulp4.0以前的任务定义方式 已经不推荐了 */
const gulp = require('gulp')
gulp.task('bar', done => {
console.log('bar work')
done()
})
// gulp定义组合任务(串行任务 和 并行任务)
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.foo1 = series(task1, task2, task3)
exports.foo2 = parallel(task1, task2, task3)
// gulp异步任务的三种方式
// 方式一 通过回调函数done
exports.callback = done => {
console.log('callback task')
done() // 标识任务成功
}
exports.callback_error = done => {
console.log('callback task 2')
done(new Error('task failed!')) // 标识任务失败
}
// 方式二 通过Promise.resolve() / Promise.reject()
exports.promise = () => {
console.log('promise task')
return Promise.resolve() // 标识成功
}
exports.promise_error = () => {
console.log('promise task2')
return Promise.reject(new Errow('task failed!'))
}
// 方式三 通过async/await
const timeout = time => {
return new Promise(resolve => {
setTimeout(resolve, time)
})
}
exports.async = async () => {
await timeout(1000)
console.log('async task')
}
// 方式四 通过return stream
const fs = require('fs')
exports.stream = () => {
const readStream = fs.createReadStream('package.json')
const writeStream = fs.createWriteStream('temp.txt')
readStream.pipe(writeStream)
return readStream
}
// 相当于
exports.stream2 = done => {
const readStream = fs.createReadStream('package.json')
const writeStream = fs.createWriteStream('temp.txt')
readStream.pipe(writeStream)
readStream.on('end', () => {
done()
})
}
三. gulp构建过程的核心原理 读取-转换-写入
// gulp构建过程的核心原理 读取-转换-写入
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)
const input = chunk.toString() // 字节码转换为字符串
const output = input.replace(/\s+/g, '')
.replace(/\/\*.+?\*\//g, '')
callback(null, output) // callback是错误优先的函数 第一个参数是错误
}
})
// 把读取出的文件流导入写入文件流
read.pipe(transform) // 转换
.pipe(write) // 写入
return read
}
四. gulp的文件操作API 和 插件的使用
// gulp的文件操作API + 插件的使用
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'))
}
本文 完。