browser-sync


Using browsersync with gulp/nodemon


I'm trying to get Browsersync (version 2.12.5) to work with gulp-nodemon/watching files. These are my gulp tasks. I can't seem to get any of my files to update/reload the browser.
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'))
});
What is the recommended way to use Browsersync with nodemon?
Apparently, it seems Browser sync refreshes the browser, before nodemon starts the server.
Here's a log from my command line that shows nodemon and Browser sync, you'll see nodemon started late
[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
I had this same problem. Below was my solution
// 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.

Related Links

Make BrowserSync use the real https URL
Can we use browser sync on external url
How to replace .html with forward slash in BrowserSync?
Error during instillation of browser sync
When using browser-sync,why is the browser saying cannot get, while everything seems fine
How to sync the actions performed on webpage using Browsersync?
lite-server, BrowserSync: setting other URL path than /
Gulp and Browsersync injecting CSS but causing a full reload
Browser-sync - serve “node_modules” out of “src” directory
[browser-sync]browser-sync proxy can't connect to Rails Application
Browserstack not serving index.html by default
whatever i do i can't access the external URL for the site or UI
How do I kill browserSync before creating it?
Unable to install browser-sync on windows 7
browser-sync proxy fails to connect
What's the equivalent bs-config.js (Browsersync) of this command?

Categories

HOME
grok
porting
telegram
ns-3
saml-2.0
cq5
3d-reconstruction
vsm
android-json
extjs4.2
google-chrome-app
reactive-programming
line
renjin
coin3d
esoteric-languages
atlassian-stash
microsoft-dynamics-nav
asp.net-mvc-viewmodel
symfony-console
database-connection
tosca
gpio
linked-data
subclass
paragraph
rselenium
card.io
openwhisk
pop3
reason
xcode7.3
reactivekit
sim-card
odroid
escpos
wmp
smoothstate.js
clarifai
hammer.js
rserve
manova
boxing
skin
smartfoxserver
slackware
segment-io
windows-azure-queues
synonym
xdoclet
refinerycms
aurora
hadoop-partitioning
qbxml
roadkill-wiki
include-guards
intel-c++
slash
pyobjc
canvg
snoop
user-permissions
grouping-sets
execve
addressing-mode
webfinger
mobility
ignite-ui
gae-quotas
getopt
dtmf
ice-cube
tlf
kogrid
facebook-timeline
font-awesome-4.0.0
onload-event
http-status-code-410
sqlclr
curb
tree-balancing
cakephp-1.2
os.system
database-create
failing-tests
gobject-introspection
htdocs
xcelsius
umra
instantiationexception
lxr

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App