【一个gulp构建工作流案例】一个构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 = https://www.it610.com/article/`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,
}
