在使用 Gulp 编译 Node 代码的时候，我想在编译之前删除原始的 build 目录，配置项如下：
const gulp = require("gulp");
const del = require("del");
const babel = require("gulp-babel");
const liveReload = require("gulp-livereload");
const env = process.env.NODE_ENV
const isDevelopment = (env === "dev");
// build 文件夹清理
gulp.task("clean",()=>{
del(["build/"])
})
// 复制 Views 文件夹
gulp.task("copyViews",()=>{
gulp.src("src/nodebff/views/**/*")
.pipe(gulp.dest("build/views"))
})
// 编译
gulp.task("compile",["clean"],()=>{
gulp.src("src/nodebff/**/*.js")
.pipe(babel({
babelrc:false,
plugins:[
"babel-plugin-transform-es2015-modules-commonjs"
]
}))
.pipe(gulp.dest("build/"))
.pipe(liveReload());
})
// 开发环境构建
gulp.task("build:dev",["compile","copyViews"]);
// 生产环境构建
gulp.task("build:prod",["compile","copyViews"]);
// 自动监控
gulp.task("autoWatch",()=>{
liveReload.listen();
gulp.watch("src/nodebff/**/*.js",["build:dev"])
});
gulp.task("default",[isDevelopment ? "autoWatch" : "build:prod"]);
主要定义了针对开发环境的 build:dev 任务和针对生产环境的 build:prod 任务，以及自动监控的任务 autoWatch，同时还有几个细分任务：清理文件夹的 clean 任务、负责复制 Views 文件夹的 copyViews 任务以及负责编译 JS 文件的 compile 任务。
在执行 compile 任务之前需要先执行 clean 任务清理文件夹，以避免代码污染。
看起来没什么问题，在真正运行时出现了这么一种情况：
编译node.gif
如上，build 文件夹一会出现一会消失，让人苦恼，如果同时还是用了 supervisor 这样的自启工具，还会频繁的崩溃。
在我的配置中，
compile 任务和 copyViews 任务是在 clean 任务之后执行的，然后才将文件编译后放到新建的 build 文件夹下，执行顺序上应该没有问题。我猜测问题可能出现在 clean 这个任务上，我在 clean 任务中使用了 del 包删除 build 文件，删除的过程可能是异步的，也就是可能在真正执行删除时 compile 任务和 copyViews 任务已经执行过了？我的解决方案是使用万能的
setTimeout 神器，只需对原始代码做一点修改：
const gulp = require("gulp");
const del = require("del");
const babel = require("gulp-babel");
const liveReload = require("gulp-livereload");
const env = process.env.NODE_ENV
const isDevelopment = (env === "dev");
// build 文件夹清理
gulp.task("clean",()=>{
del(["build/"])
})
// 复制 Views 文件夹
gulp.task("copyViews",()=>{
setTimeout(()=>{
gulp.src("src/nodebff/views/**/*")
.pipe(gulp.dest("build/views"))
},100)
})
// 编译
gulp.task("compile",["clean"],()=>{
setTimeout(()=>{
gulp.src("src/nodebff/**/*.js")
.pipe(babel({
babelrc:false,
plugins:[
"babel-plugin-transform-es2015-modules-commonjs"
]
}))
.pipe(gulp.dest("build/"))
.pipe(liveReload());
},100)
})
// 开发环境构建
gulp.task("build:dev",["compile","copyViews"]);
// 生产环境构建
gulp.task("build:prod",["compile","copyViews"]);
// 自动监控
gulp.task("autoWatch",()=>{
liveReload.listen();
gulp.watch("src/nodebff/**/*.js",["build:dev"])
});
gulp.task("default",[isDevelopment ? "autoWatch" : "build:prod"]);
之后的效果如下：
编译node.gif
注：如果保存的频率过快的话，还是会出现上面那种情况，这时可以将
setTimeout 的延迟时间改大一些。
完。
