共计 2253 个字符，预计需要花费 6 分钟才能阅读完成。
介绍
这段配置是之前的 gulp 版本不适配新版本 node 后，更新到了 gulp4 的新写法。
在业务中，目前使用这份配置的是一个 Koa2+njk 项目，所以增加了 nodemon 来启动 server。
分别用到的技术为：
Less + autoprefixer + cleancss + sourceMap
Js + es6(babel) + uglify + sourceMap
BrowserSync For auto reload
Nodemon for restart Koa2 server
配置
废话不多说，上代码：
/*
* Gulp4 通用配置
* Author: Kinice
* Time: 2018-12-26
*/
const gulp = require(‘gulp’)
const path = require(‘path’)
const less = require(‘gulp-less’)
const browserSync = require(‘browser-sync’).create()
const reload = browserSync.reload
const cleancss = require(‘gulp-cssnano’)
const autoprefixer = require(‘gulp-autoprefixer’)
const pump = require(‘pump’)
const uglify = require(‘gulp-uglify’)
const sourcemaps = require(‘gulp-sourcemaps’)
const babel = require(‘gulp-babel’)
const nodemon = require(‘gulp-nodemon’)
const changed = require(‘gulp-changed’)
const config = require(‘./config’)
const port = process.env.PORT || config.port
// 将所需的资源 path 放到一起便于管理
const paths = {
style: {
src: ‘src/less/**/*.less’,
dest: ‘public/css/’
},
script: {
src: ‘src/js/**/*.js’,
dest: ‘public/js/’
},
view: {
src: ‘views/**/*.njk’,
dest: ‘views/’
}
}
// 处理 less 的 task
function style(callback) {
// pump 提供了中断 pipe 的 callback
return pump([
gulp.src(path.join(__dirname, paths.style.src)),
// 开启 sourcemap 以方便调试
sourcemaps.init(),
less(),
autoprefixer({
browsers: [
‘>1%’,
‘last 10 version’,
‘iOS >= 8’
]
}),
cleancss(),
sourcemaps.write(‘maps’),
gulp.dest(path.join(__dirname, paths.style.dest)),
reload({
stream: true
})
], callback)
}
// 处理 js 的 task
function script(callback) {
return pump([
gulp.src(path.join(__dirname, paths.script.src)),
sourcemaps.init(),
babel(),
uglify(),
sourcemaps.write(‘maps’),
gulp.dest(path.join(__dirname, paths.script.dest))
], callback)
}
// 监测文件修改并调用相应 task 之后刷新页面
function watch() {
gulp.watch(path.join(__dirname, paths.style.src), style)
gulp.watch(path.join(__dirname, paths.script.src), script)
gulp.watch(path.join(__dirname, `${paths.style.dest}*.css`)).on(‘change’, reload)
gulp.watch(path.join(__dirname, `${paths.script.dest}*.js`)).on(‘change’, reload)
gulp.watch(path.join(__dirname, `${paths.view.dest}*.njk`)).on(‘change’, reload)
}
// 使用 nodemon 启动 node server，如果不含 node 就去掉
function server() {
nodemon({
script: ‘app.js’
})
browserSync.init({
proxy: `http://localhost:${port}`
})
}
exports.style = style
exports.script = script
exports.watch = watch
// 同步执行 script 和 style task
let build = gulp.parallel(script, style)
// 先 build，再同步启动 node server 和开启文件监测
gulp.task(‘default’, gulp.series(build, gulp.parallel(server, watch)))