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

Quit Browser-sync from terminal
lite-serverbs-config.js: middleware and array of folders
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

Categories

HOME
checkstyle
jax-rs
youtube-data-api-v3
hessian
obfuscation
shiro
gradient
pyqt4
python-multithreading
retrofit2
opengl-3
extjs4.2
minecraft-forge
google-chrome-app
dkim
stellar.js
speech-synthesis
atlassian
google-content-api
symbols
asciidoctor-pdf
pagespeed
pimcore
interpreter
xunit
slidetoggle
opentk
ms-access-web-app
inversion-of-control
bioinformatics
realm-mobile-platform
alm
userdefaults
dotspatial
fstream
least-squares
getlasterror
raft
openerp-7
sim-toolkit
apic
railstutorial.org
metawidget
jvmti
signals-slots
comparison-operators
vmware-fusion
softmax
dbnull
bindingnavigator
angular-http
optimizely
facebook-pixel
geotiff
arq
avx
rackspace-cloud
restore
juice-ui
reporting-services-2012
vulcanize
file-uri
avspeechsynthesizer
riot
fink
cycle2
jparsec
themoviedb-api
file-move
roadkill-wiki
visual-sourcesafe-2005
dulwich
haskell-warp
sql-server-data-tools
node-serialport
kubuntu
zxspectrum
cryptographichashfunction
cross-join
delayed-execution
rapidsvn
theos
structuremap3
appserver
cbind
getopt
ice-cube
merb
dolby-audio-api
jquery-1.9
swfobject
virtual-pc
apache-abdera
dopostback
pyunit
listitem
extconf.rb
isa-swizzling
flex-mobile
drupal-fivestar
filesystemobject
silverlight-oob
lalr
technical-debt
httpcookie
xslcompiledtransform

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