[英]gulp-nodemon + browserSync: has no method 'spawnSync' & long loading time
我想使用browsersync运行nodemon,以便可以立即查看代码中的更改。 我已经从yeoman gulp-angular建立了一个安装环境,因此除非有充分的理由,否则我要避免使用liverload等,并坚持使用预设。
我用`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,trigers监视构建和监视应用程序。
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初始化函数移到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);
});
});
问题出在您的node.js版本中。 在gulp-nodemon的最新更新中,您可以看到需要0.12.x。 因此,如果您安装了新版本的gulp-nodemon,则在较低的node.js上,您将看到该错误。
https://github.com/JacksonGariety/gulp-nodemon/releases/tag/2.0.2
您可以更新节点,第二种方法是安装先前版本的gulp-nodemon。
祝好运!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.