共计 2673 个字符,预计需要花费 7 分钟才能阅读完成。
一个构 gulp 自动化构建工作流案例
须要对款式文件,js 文件,html 文件,图片字体文件,其余额定文件顺次构建工作,并在此过程中实现对文件的压缩合并
const {
src,
dest,
series,
parallel,
watch,
} = require('gulp');
const loadPlugins = require('gulp-load-plugins')
const plugins = loadPlugins() // 加载插件模块
const sass = require('gulp-sass')(require('sass'));
// sass.compiler = require("node-sass");
// const plugins.babel = require('gulp-babel')
// const plugins.swig = require('gulp-swig')
// const plugins.imagemin = require('gulp-imagemin')
const del = require('del') // 革除文件插件
const browserSync = require('browser-sync') // 提供一个能够热更新的开发服务器
const bs = browserSync.create() // 创立一个开发服务器
const data = `your template data`
// 清理 dist 文件夹
const clean = () => {return del(['dist', 'temp'])
}
const style = () => {
// base 参数保留了 src 目录前面的基准门路
return src('src/assets/styles/*.scss', {base: 'src'})
.pipe(sass({outputStyle: 'expanded'})) // 齐全开展
.pipe(dest('temp')) // 放到长期目录
.pipe(bs.reload({stream: true})) // 外部文件流信息推到浏览器
}
const script = () => {
return src('src/assets/scripts/*.js', {base: 'src'})
.pipe(plugins.babel({presets: ['@babel/preset-env'] // 蕴含了最新的 js 语法
}))
.pipe(dest('temp'))
.pipe(bs.reload({stream: true}))
}
const page = () => {
return src('src/**/*.html', {base: 'src'}) // ** 代表了 src 目录下任意 html 文件
.pipe(plugins.swig({
data, // 动态数据模板编译输入
defaults: {cache: false // 避免模板缓存导致页面不能及时更新}
}))
.pipe(dest('temp'))
.pipe(bs.reload({stream: true}))
}
const image = () => {
return src('src/assets/images/**', {base: 'src'})
.pipe(plugins.imagemin())
.pipe(dest('dist'))
}
const font = () => {
return src('src/assets/fonts/**', {base: 'src'})
.pipe(plugins.imagemin())
.pipe(dest('dist'))
}
const extra = () => { // 拷贝额定文件
return src('public/**', {base: 'public'})
.pipe(dest('dist'))
}
const server = () => {watch('src/assets/styles/*.scss', style)
watch('src/assets/scripts/*.js', script)
watch('src/*.html', page)
// 上面三个工作,只须要上线的时候公布进来即可, 开发阶段的构建须要缩小构建,进步构建效率
// watch('src/assets/image/**', image)
// watch('src/assets/fonts/**', font)
// watch('public/**', extra)
watch([
'src/assets/images/**',
'src/assets/fonts/**',
'public/**'
], bs.reload)
bs.init({
notify: false,
port: 2180,
// files: 'dist/**', // 监听文件夹 srcipt,style,page 因为 bs.realod, 这里不必再监听
// open: false, // 勾销关上浏览器
server: {baseDir: ['temp', 'src', 'public'], // 服务器运行根目录,数组内为顺次寻找目录
routes: {'/node_modules': 'node_modules'}
}
})
}
const useref = () => {
return src('temp/*.html', {base: 'temp'})
.pipe(plugins.useref({searchPath: ['temp', '.']
})) // 解决构建正文, 合并到一个文件中
// 压缩 html,js,css
.pipe(plugins.if(/\.js$/, plugins.uglify()))
.pipe(plugins.if(/\.css$/, plugins.cleanCss()))
.pipe(plugins.if(/\.html$/, plugins.htmlmin({
collapseWhitespace: true, // 解决 html 文件空格
minifyCSS: true,
minifyJS: true
})))
.pipe(dest('release'))
}
const compile = parallel(style, script, page) // 并行执行三个工作,组合为一个 compile 工作
// build 之前执行 clean 工作, 上线之前执行 build
const build = series(clean, parallel(series(compile, useref), image, font, extra));
const develop = series(compile, server)
module.exports = {
build,
clean,
develop,
}
正文完