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

Connect-gzip-static doesn't pick up html in firefox
Is it safe to include localhost into your connect-src for CSP?
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

Categories

HOME
httparty
paraview
delphi-7
awk
eslint
youtube-data-api-v3
static
sublimetext
vscode-extensions
rom
scripting
nested-if
echo
mapbox
nuget-package
retrofit2
accessibility
spin
fosrestbundle
owin
commonjs
fhir
pega
jsonpath
comsol
http-post
linear-algebra
imessage
exit
easeljs
pchart
stackexchange
nstimer
fractions
spotipy
winexe
glib
playstation-portable
instantiation
getpixel
fossil
xajax
apiary.io
filesystemwatcher
apns-php
opensmpp
urlsession
azure-arm
postgresql-8.4
avcapturedevice
apache-directory
jboss-4.2.x
libgphoto2
term
posixct
podscms
boo
java-websocket
rmongo
polyline
pacemaker
segment-io
lrs
spring-cloud-feign
dup
tooleap
vorpal.js
tracker-enabled-dbcontext
yajsw
spring-retry
pypiserver
video-player
batik
graphics2d
ms-access-2000
git-ftp
ghcjs
ssis-data-flow
sip-server
post-commit-hook
solace-mq
ice-cube
oocss
cffile
jquery-1.9
httponly
relative
node-redis
tournament
massive
http-daemon
pos-for-.net
sun
product-management
ifilter
httpcookie
wspbuilder

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