简单的展示页面就没必要用框架了,pug + gulp 就够了。还能减少代码量。
const { src, dest, parallel, watch ,series} = require('gulp')
const plugins = require('gulp-load-plugins')()
const browserSync = require('browser-sync').create()
const rename = require("gulp-rename")
var reload = browserSync.reload
// 移动静态资源
function moveStatic () {
return src('./src/assets/*')
.pipe(dest('./dist/assets/'))
}
// 获取css
function getStyle() {
return src('./src/style/style.css')
.pipe(dest('./dist/'))
}
// 获取JS
function getJS() {
return src('./src/lib/index.js')
.pipe(dest('./dist/'))
}
// 国际化-en 打包html
function buildEn () {
process.env.NODE_ENV = 'en'
return src('./src/html/index.pug')
.pipe(plugins.plumber()) // 捕获处理任务中的错误
.pipe(plugins.pug({ pretty: true}))
.pipe(rename('en.html'))
.pipe(dest('./dist/'))
}
// 国际化-id 打包html
function buildId () {
process.env.NODE_ENV = 'id'
return src('./src/html/index.pug')
.pipe(plugins.plumber()) // 捕获处理任务中的错误
.pipe(plugins.pug({ pretty: true}))
.pipe(rename('id.html'))
.pipe(dest('./dist/'))
}
// 开启浏览器同步更新
browserSync.init({
server: "./dist",
index: 'en.html',
port: 8889
})
const build = parallel(moveStatic, getStyle, getJS, series(buildEn,buildId))
function server (cb) {
build()
reload()
cb() // 一定要有回调,不然没法继续
}
// 打包
exports.build = build
// 监听
exports.watch = function () {
return watch(['./src/*/*', './src/*/*/*'], server)
}