组合任务
yarn init -yes
yarn add gulp --dev
// yarn gulp foo
exports.foo = done => {
console.log('foo')
done()
}
// yarn gulp default
exports.default = done => {
console.log('default')
done()
}
// yarn gulp bar
const gulp = require('gulp')
gulp.task('bar', done => {
console.log('bar')
done()
})
const { series, parallel } = require('gulp')
const task1 = done => {
setTimeout(() => {
console.log('task1')
done()
}, 1000)
}
const task2 = done => {
setTimeout(() => {
console.log('task2')
done()
}, 1000)
}
const task3 = done => {
setTimeout(() => {
console.log('task3')
done()
}, 1000)
}
exports.foo = series(task1, task2, task3)
exports.bar = parallel(task1, task2, task3)
异步任务
exports.callback = done => {
console.log('callback')
done()
}
exports.callback_error = done => {
console.log('callback')
done(new Error('task failed'))
}
exports.promise = done => {
console.log('promise')
return Promise.resolve()
}
exports.promise_error = done => {
console.log('promise')
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
}
Gulp构建过程核心工作原理
const fs = require('fs')
const { Transform } = require('stream')
exports.default = () => {
// 文件读取流
const read = fs.createReadStream('normalize.css')
// 文件写入流
const write = fs.createWriteStream('normalize.min.css')
// 核心转换过程实现
// chunk => 读取流中读取到的内容(Bufffer)
const transform = new Transform({
transform: (chunk, encoding, callback) => {
const input = chunk.toString()
const outpit = input.replace(/\s+/g, '').replace('//*.+?*//g', '')
callback(null, output)
}
})
// 把读取出来的文件流导入写入文件流 /* */
read.pipe(write)
return read
}
文件操作API
yarn add gulp-clean-css gulp-rename --dev
const { src, dest } = require('gulp')
const cleanCss = require('gulp-clean-css') // 压缩css转换流
const rename = require（‘gulp-rename') // 重命名
export default = () => {
return src('src/*.css')
.pipe(cleanCss())
.pipe(rename({ extname: '.min.css' }))
.pipe(dest('dist'))
}
样式编译
yarn add gulp-sass --dev
const { src, dest } = require('gulp')
const sass = require（‘gulp-sass') // 转换流
const style = () =>{
return src('src/assets/styles/*.scss', { base: 'src' }) // base根据文件目录输出
.pipe(sass({ outputStyle： ’expanded' })) // 只会转换没有下划线开头的文件
.pipe(dest('dist'))
}
module.exports = {
style
}
运行yarn gulp style
脚本文件编译
yarn add gulp-babel @babel/core @babel-preset-env --dev
const babel = require（‘gulp-babel')
const script = () =>{
return src('src/assets/scripts/*.js', { base: 'src' }) // base根据文件目录输出
.pipe(babel({ presets： ['@babel/preset-env'] }))
.pipe(dest('dist'))
}
module.exports = {
style,
script
}
yarn gulp script
页面模板编译
yarn add gulp-swig --dev
const { src, dest, parallel } = require('gulp')
const swig = require（‘gulp-swig')
const data = [] // html的数据标记
const page = () =>{
return src('src/*.html', { base: 'src' }) // base根据文件目录输出
.pipe(swig({ data }))
.pipe(dest('dist'))
}
// 组合任务
const compile = parallel(style, script, page)
module.exports = {
style,
script,
page,
compile
}
yarn gulp page
yarn gulp compile
图片和字体文件转换
yarn add gulp-imagemin --dev
const imagemin = require（‘gulp-imagemin')
const image = () =>{
return src('src/assets/images/**', { base: 'src' })
.pipe(imagemin({ data }))
.pipe(dest('dist'))
}
const font = () =>{
return src('src/assets/font/**', { base: 'src' })
.pipe(imagemin({ data }))
.pipe(dest('dist'))
}
const compile = parallel(style, script, page, image, font)
module.exports = {
compile,
image,
font
}
yarn gulp image
其他文件及文件清除
yarn add del --dev
const { src, dest, parallel, series } = require('gulp')
const imagemin = require（‘gulp-imagemin')
const clean = () =>{
return del(['dist'])
}
const build = series(clean, parallel(compile, extra))
module.exports = {
compile,
build
}
yarn gulp build
自动加载插件
yarn add gulp-load-plugins --dev
const { src, dest, parallel, series } = require('gulp')
const loadPlugins = require（‘gulp-load-plugins')
const plugins = loadPlugins()
const font = () =>{
return src('src/assets/font/**', { base: 'src' })
.pipe(plugins.imagemin({ data })) // 可以不引入require，直接plugins.使用
.pipe(dest('dist'))
}
const build = series(clean, parallel(compile, extra))
module.exports = {
compile,
build
}
yarn gulp build
开发服务器
// 自动热更新到浏览器
yarn add browser-sync --dev
const { src, dest, parallel, series, watch } = require('gulp')
const browserSync = require('browser-sync')
// 不使用files使用bs.reload
const style = () => {
return src('src/assets/styles/*.scss', { base: 'src' })
.pipe(plugins.sass({ outputStyle: 'expanded' }))
.pipe(dest('temp'))
.pipe(bs.reload({ stream: true })) // 改变文件自动更新浏览器
}
const serve = () => {
watch('src/assets/styles/*.scss', style) // 修改文件自动更新
watch('src/assets/scripts/*.js', script)
watch('src/*.html', page)
// watch('src/assets/images/**', image)
// watch('src/assets/fonts/**', font)
// watch('public/**', extra)
watch([ // 减少构建次数
'src/assets/images/**',
'src/assets/fonts/**',
'public/**'
], bs.reload)
bs.init({
notify: false, // 关闭右上角提示
port: 2080, // 端口
// open: false, // 自动打开浏览器
// files: 'dist/**', // dist改变自动更新浏览器
server: {
baseDir: ['dist', 'src', 'public'], // src, public下文件开发阶段不需监听
routes: {
'/node_modules': 'node_modules' // 处理node_modules
}
}
})
}
const compile = parallel(style, script, page)
const dev = series(compile, serve)
// 上线之前执行的任务
const build = series(
clean,
parallel(
compile,
image,
font,
extra
)
)
module.exports = {
dev,
compile,
build
}
useRef文件引用处理
yarn add gulp-useref --dev
const { src, dest, parallel, series } = require('gulp')
// 处理html构建注释
const useref = () => {
return src('dist/*.html', { base: 'dist' })
.pipe(plugins.useref({ searchPath: ['dist', '.'] })) // .项目根目录(找node-modules)
// html js css
.pipe(plugins.if(/.js$/, plugins.uglify()))
.pipe(plugins.if(/.css$/, plugins.cleanCss()))
.pipe(plugins.if(/.html$/, plugins.htmlmin({
collapseWhitespace: true,
minifyCSS: true,
minifyJS: true
})))
.pipe(dest('dist'))
}
// 上线之前执行的任务
const build = series(
clean,
parallel(
series(compile, useref),
image,
font,
extra
)
)
module.exports = {
compile,
build
}
yarn gulp build
