Part2-1 gulp自动化构建
整体思路：
最终创建二个大任务： develop、build ，分别满足 开发时 和 上线 打包的需求。
在根目录中创建 pages.config.js 文件，准备好 swig 模板引擎需要的数据
一、先创建 develop、build 都需要的任务。
1、无论是 develop、build, 我们都希望在项目构建前能先清空原目录中的文件，再进行构建。创建 clean 任务
2、develop、build 都会对 html、js、css 做构建，创建 style、script、page 任务
3、创建 compile 任务，将 style、script、page 用 parallel 模块 并行执行
4、develop、build 用 series 模块 添加 clean、 compile 任务串行执行，clean任务执行完后再执行 compile 命令
const { src, dest, parallel, series, watch } = require('gulp')
const del = require('del')
const loadPlugins = require('gulp-load-plugins')
const browserSync = require('browser-sync')
const data = require('./pages.config.js')
const plugins = loadPlugins()
const bs = browserSync.create()
const clean = () => {
return del(['dist', 'temp'])
}
const style = () => {
return src('src/assets/styles/*.scss', { base: 'src' })
.pipe(plugins.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'] }))
.pipe(dest('temp'))
.pipe(bs.reload({ stream: true }))
}
const page = () => {
return src('src/*.html', { base: 'src' })
.pipe(plugins.swig({ data, defaults: { cache: false } }))
.pipe(dest('temp'))
.pipe(bs.reload({ stream: true }))
}
const compile = parallel(style, script, page)
const build = series(clean, compile)
const develop = series(clean, compile)
module.exports = {
build,
develop
}
二、添加开发时需要的任务
添加 serve 任务，对开发过程中，修改的文件进行监听，并使浏览器刷新
将 serve 任务添加到 develop 任务里，使用 series 模块，先执行 clean 任务，执行完clean任务，执行compile任务，执行完 compile 任务，再执行 serve 任务
const { src, dest, parallel, series, watch } = require('gulp')
const del = require('del')
const loadPlugins = require('gulp-load-plugins')
const browserSync = require('browser-sync')
const data = require('./pages.config.js')
const plugins = loadPlugins()
const bs = browserSync.create()
const clean = () => {
return del(['dist', 'temp'])
}
const style = () => {
return src('src/assets/styles/*.scss', { base: 'src' })
.pipe(plugins.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'] }))
.pipe(dest('temp'))
.pipe(bs.reload({ stream: true }))
}
const page = () => {
return src('src/*.html', { base: 'src' })
.pipe(plugins.swig({ data, defaults: { cache: false } }))
.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/**',
'src/assets/fonts/**',
'public/**'
], bs.reload)
bs.init({
notify: false,
server: {
baseDir: ['temp', 'src', 'public'],
routes: {
'/node_modules': 'node_modules'
}
}
})
}
const compile = parallel(style, script, page)
const build = series(clean, compile)
const develop = series(clean, compile, serve)
module.exports = {
build,
develop
}
三、添加上线前打包需要的任务
1、图片、字体、public下的文件由于不常改动，并且只是进行压缩的文件，在开发时没有进行构建，所以需要 build 任务里添加进去。
创建 image、font、extra任务添加进 build 任务
2、创建 useref 任务，对于 html 里外部引用的文件进行处理，并添加进 build 任务里
const { src, dest, parallel, series, watch } = require('gulp')
const del = require('del')
const loadPlugins = require('gulp-load-plugins')
const browserSync = require('browser-sync')
const data = require('./pages.config.js')
const plugins = loadPlugins()
const bs = browserSync.create()
const clean = () => {
return del(['dist', 'temp'])
}
const style = () => {
return src('src/assets/styles/*.scss', { base: 'src' })
.pipe(plugins.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'] }))
.pipe(dest('temp'))
.pipe(bs.reload({ stream: true }))
}
const page = () => {
return src('src/*.html', { base: 'src' })
.pipe(plugins.swig({ data, defaults: { cache: false } }))
.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/**',
'src/assets/fonts/**',
'public/**'
], bs.reload)
bs.init({
notify: false,
server: {
baseDir: ['temp', 'src', 'public'],
routes: {
'/node_modules': 'node_modules'
}
}
})
}
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 useref = () => {
return src('temp/*.html', { base: 'temp' })
.pipe(plugins.useref({ searchPath: ['temp', '.'] }))
.pipe(plugins.if(/\.js$/, plugins.uglify()))
.pipe(plugins.if(/\.css$/, plugins.cleanCss()))
.pipe(plugins.if(/\.html$/, plugins.htmlmin({
collapseWhitespace: true, // 压缩空白符和换行符
minifyCSS: true, // 压缩css代码
minifyJS: true // 压缩js代码
})))
.pipe(dest('dist')) // 将压缩后的文件先放在 release 目录里
}
const compile = parallel(style, script, page)
const build = series(clean, parallel(series(compile, useref), extra, image, font))
const develop = series(clean, compile, serve)
module.exports = {
build,
develop
}
四、在 package.json 里添加启动命令
将 build, develop启动命令配置到 package.json 文件中去
"scripts": {
"build": "gulp build",
"develop": "gulp develop"
}
1