Gulp
基于内存,读写速度快,默认同时执行多个任务,高效易用,使用方式直观易懂
约定每个任务是异步任务,需标记任务完成
简单使用:
yarn add gulp --dev
code gulpfile.js 入口文件
yarn gulp xxx 运行导出函数
-
标识任务完成
/ // 导出的函数都会作为 gulp 任务 // exports.foo = () => { // console.log('foo task working~') // } // gulp 的任务函数都是异步的 // 可以通过调用回调函数标识任务完成 exports.foo = done => { console.log('foo task working~') done() // 标识任务执行完成 } // default 是默认任务 // 在运行是可以省略任务名参数 exports.default = done => { console.log('default task working~') done() } // v4.0 之前需要通过 gulp.task() 方法注册任务 const gulp = require('gulp') gulp.task('bar', done => { console.log('bar task working~') done() })
-
组合任务
const { series, parallel} = require('gulp') //串行/并行 // 让多个任务按照顺序依次执行 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')) } exports.promise = () => { console.log('promise task') return Promise.resolve() //gulp将忽略resolve的值,无需给值 } exports.promise_error = () => { console.log('promise task') return Promise.reject(new Error('task failed')) } 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('temp.txt'); readStream.pipe(writeStream); return readStream //触发stream的end事件标记结束 }
构建过程核心原理
文件操作API
读取文件: src( )
写入文件: 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'))
}
插件
-
gulp-clean-css
yarn add gulp-clean-css --dev
-
gulp-rename
yarn add gulp-rename --dev
插件
-
gulp-clean-css
yarn add gulp-clean-css --dev
-
gulp-rename
yarn add gulp-rename --dev