我想用 browsersync 运行 nodemon，这样我就可以立即看到代码中的变化。我已经有一个来自 yeoman gulp-angular 的设置环境，所以我想避免使用肝负载等并坚持预设，除非有很大的原因。
我用 `gulp:serve' 启动我的服务器
gulp.task('serve', ['node'], function () {
browserSyncInit([
paths.tmp + '/serve',
paths.src
], [
paths.tmp + '/serve/{app,components}/**/*.css',
paths.tmp + '/serve/{app,components,node,config}/**/*.js',
paths.src + 'src/assets/images/**/*',
paths.tmp + '/serve/*.html',
paths.tmp + '/serve/{app,components}/**/*.html',
paths.src + '/{app,components}/**/*.html'
]);
});
在调用 browserSync 之前，需要任务节点，否则路由将一无所获：
gulp.task('node',['watch'], function(){
return nodemon({
script: paths.tmp + '/serve/server.js',
ext: 'js html',
tasks: ['browserSync'],
env: { 'NODE_ENV': 'development' } ,
nodeArgs: ['--debug=9999']
});
});
任务节点启动 gulp-nodemon 并触发 watch 来构建和监视应用程序。
gulp.task('watch', ['templateCache', 'images_tmp', 'partials_tmp'], function () {
gulp.watch([
paths.src + '/*.html',
paths.src + '/{app,components}/**/*.scss',
paths.src + '/{app,components}/**/*.js',
paths.src + '/{app,components,node,config}/**/*.coffee',
'bower.json'
], ['templateCache', 'partials_tmp']);
});
Watch 本身会触发两个函数，一个将 scriptTag 插入 index.html 以加载 angularTemplateCache。第二个获取所有 html 文件并将它们保存到 templateCache.js 中。第二个需要一个复制所有 css 和 js 文件的任务。
问题1）：
当我更改文件时，它会引发错误：
gulp-nodemon/index.js:76
cp.spawnSync('gulp', tasks, { stdio: [0, 1, 2] })
^
TypeError: Object #<Object> has no method 'spawnSync'
问题2）：
当我启动该功能时，一切正常，但加载时间很长。我可以通过手动刷新 broserSync 打开的选项卡来加快加载速度。
编辑1：
Gulp-nodemon 监视目录中的文件以进行更改，因此我删除了 gulp-watch 以排除错误源。spawnSync 错误仍然存在：
gulp.task('node',['templateCache', 'images_tmp', 'partials_tmp'], function(){
return nodemon({
script: paths.tmp + '/serve/server.js',
ext: 'js html coffee scss',
tasks: ['templateCache', 'partials_tmp'],
env: { 'NODE_ENV': 'development' } ,
nodeArgs: ['--debug=9999']
}).on('restart' , function onRestart() {
console.log("################################restarted node");
//Also reload the browsers after a slight delay
setTimeout(function reload() {
browserSync.reload({
stream: false
});
}, 5000);
});
});
编辑2：
我可以通过将 browsersync init 函数移到 nodemon 的 on start 事件中来解决加载时间过长的问题。也许 nodemon 之前没有完全加载。
gulp.task('node',['templateCache', 'images_tmp', 'partials_tmp'], function(cb){
var called = false;
return nodemon({
script: paths.tmp + '/serve/server.js',
ext: 'js html coffee scss',
tasks: ['node'],
env: { 'NODE_ENV': 'development' } ,
nodeArgs: ['--debug=9999']
})
.on('start', function onStart() {
if (!called) {
cb();
browserSyncInit([
paths.tmp + '/serve',
paths.src
], [
paths.tmp + '/serve/{app,components}/**/*.css',
paths.tmp + '/serve/{app,components,node,config}/**/*.js',
paths.src + 'src/assets/images/**/*',
paths.tmp + '/serve/*.html',
paths.tmp + '/serve/{app,components}/**/*.html',
paths.src + '/{app,components}/**/*.html'
]);
}
called = true;
})
.on('restart' , function onRestart() {
console.log("################################restarted node");
//Also reload the browsers after a slight delay
setTimeout(function reload() {
browserSync.reload({
stream: false
});
}, 5000);
});
});