Browser sync 将browsersync与gulp/nodemon一起使用
我正在尝试让Browsersync(版本2.12.5)与gulp nodemon/监视文件一起工作。这些是我的吞咽任务。我似乎无法获取任何文件来更新/重新加载浏览器Browser sync 将browsersync与gulp/nodemon一起使用,browser-sync,nodemon,gulp-browser-sync,Browser Sync,Nodemon,Gulp Browser Sync,我正在尝试让Browsersync(版本2.12.5)与gulp nodemon/监视文件一起工作。这些是我的吞咽任务。我似乎无法获取任何文件来更新/重新加载浏览器 var $ = require('gulp-load-plugins')(); var browserSync = require('browser-sync'); var gulp = require('gulp'); // load in gulp tasks etc...... gulp.task('se
var $ = require('gulp-load-plugins')();
var browserSync = require('browser-sync');
var gulp = require('gulp');
// load in gulp tasks etc......
gulp.task('server', function() {
return $.nodemon({
script: 'server.js'
});
});
gulp.task('browser-sync', ['server'], function() {
browserSync.init({
proxy: 'http://localhost:3000',
port: 4000,
open: false,
notify: false,
logConnections: false,
reloadDelay: 1000
});
});
gulp.task('watch', ['browser-sync'], function() {
var scripts = 'public/static/scripts/**/*.js';
var styles = 'public/static/styles/**/*.styl';
gulp.watch(scripts, ['scripts']);
gulp.watch(styles, ['styles']);
});
gulp.task('scripts', function() {
return gulp.src('public/static/scripts/**/*.js')
.pipe($.plumber())
.pipe(gulp.dest('build/static/scripts'));
});
gulp.task('styles', function() {
return gulp.src('public/static/styles/app.styl', {base: 'public'})
.pipe($.stylus())
.pipe(gulp.dest('build'))
});
建议使用带nodemon的Browsersync的方法是什么?显然,
Browser sync
似乎会在nodemon
启动服务器之前刷新浏览器
下面是我的命令行中的一个日志,其中显示了nodemon
和Browser sync
,您将看到nodemon
启动较晚
[18:21:09] Finished 'jade' after 5.32 μs
[18:21:09] [nodemon] restarting due to changes...
>> node restart
[BS] Reloading Browsers...
[18:21:09] [nodemon] restarting due to changes...
>> node restart
[BS] Reloading Browsers...
[18:21:09] [nodemon] restarting due to changes...
>> node restart
[BS] Reloading Browsers...
[18:21:09] [nodemon] starting `node ./bin/www`
nodemon started
我也有同样的问题。下面是我的解决方案
// Initialize browserSync
var browserSync = require('browser-sync').create(),
reload = browserSync.reload;
// watcher
gulp.task('watch', function() {
var scripts = 'public/static/scripts/**/*.js';
var styles = 'public/static/styles/**/*.styl';
gulp.watch(scripts, ['scripts']);
gulp.watch(styles, ['styles']);
gulp
.watch('public')
.on('change', reload); // the static files you want to watch and reload
});
// browser-sync
gulp.task('browser-sync', function() {
browserSync.init({
proxy: 'http://localhost:3000',// Don't use proxy
port: 4000, // Desired PORT address.
open: false,
notify: false,
logConnections: false,
reloadDelay: 1000
server: 'public', // Your compiled static directory
});
})
gulp.task('default', ['scripts', 'styles', 'browser-sync', 'watch']) // This builds my script, styles and other static assets(img), starts browser-sync and watches for changes.
我还试图为浏览器sync+nodemon构建一个gulpfile,现在给出真正的答案还为时过早。你看到这个了吗?