Я хочу запустить 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 в событие запуска nodemon. возможно, 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);
});
});