Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Gulp, BrowserSync, Node, and Nodemon all working in harmony. ;)
/**
* World's simplest express server
* - used to serve index.html from /public
*/
var express = require('express');
var serveStatic = require('serve-static');
var app = express();
app.use(serveStatic(__dirname + '/public'));
app.listen(3000);
console.log('Express listening on port 3000');
/**
* Module Dependencies
*/
var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var nodemon = require('gulp-nodemon');
/**
* Gulp Tasks
*/
gulp.task('browser-sync', ['nodemon'], function() {
browserSync({
proxy: "localhost:3000", // local node app address
port: 5000, // use *different* port than above
notify: true
});
});
gulp.task('nodemon', function (cb) {
var called = false;
return nodemon({
script: 'app.js',
ignore: [
'gulpfile.js',
'node_modules/'
]
})
.on('start', function () {
if (!called) {
called = true;
cb();
}
})
.on('restart', function () {
setTimeout(function () {
reload({ stream: false });
}, 1000);
});
});
gulp.task('default', ['browser-sync'], function () {
gulp.watch(['public/*.html'], reload);
});
{
"private": true,
"dependencies": {
"express": "^4.5.1",
"serve-static": "^1.3.0"
},
"devDependencies": {
"browser-sync": "^1.2.1",
"gulp": "^3.8.6",
"gulp-nodemon": "^1.0.4"
}
}
@niallobrien
Copy link

niallobrien commented Jan 8, 2015

Thank you, I was struggling to get nodemon and Browser-sync working together.

@yury
Copy link

yury commented Jan 11, 2015

@seanmavley
Copy link

seanmavley commented May 1, 2016

Works great

@Jakobud
Copy link

Jakobud commented Jun 24, 2016

This doesn't seem to work with the latest version of Nodemon + Browsersync + Gulp. I can combine all 3 to get CSS stream reloading and html reloading. But when I edit app.js, browsersync will not reload in the browser. It says its reloading in the terminal, but nothing happens in the browser. No changes show up.

@pabagan
Copy link

pabagan commented Nov 8, 2016

Works fantastic. Thanks so much!!

@agreen757
Copy link

agreen757 commented Nov 22, 2016

Thanks!

@arturvt
Copy link

arturvt commented Jan 19, 2017

Working sweet here. Thanks!
Ps.: using "browser-sync": "2.18.6", "gulp-nodemon": "2.2.1", "express": "4.13.3"

@Schmerb
Copy link

Schmerb commented Jul 18, 2017

@Jakobud Did you ever get your *.js files to update in the browser? I am experiencing the same issue.

@aboggan
Copy link

aboggan commented Jul 30, 2017

Works great!I had to made some adjusts in order to make it run with a express standard demo.
The following:
on package.json, change start to this:

"scripts": {
"start": "gulp"
}

and in gulpfile.js @line 25
script: './bin/www',

that './bin/www' is the standard reference for express.

Perhaps seems silly, but I'm pretty sure there are a bunch of noobs like me seeking for something like the code you made.

Thanks a lot for sharing! (=

@tirmey
Copy link

tirmey commented Nov 19, 2017

Thanks! Just work fine!

@rajatrawataku1
Copy link

rajatrawataku1 commented Feb 5, 2018

I have used the same code, but my first page which is named as 'main.jade' is not being rendering. But when I am going to other url's like /dasboard it opens correctly. Should I name my starting file name as index.jade, will that help

@alikarimii
Copy link

alikarimii commented Apr 25, 2018

Thanks bro.work fine

@alaksandarjesus
Copy link

alaksandarjesus commented Apr 16, 2019

`

/**

  • Module Dependencies
    */

var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var nodemon = require('gulp-nodemon');

/**

  • Gulp Tasks
    */

gulp.task('nodemon', function (cb) {
var called = false;
return nodemon({
script: './bin/www',
ignore: [
'gulpfile.js',
'node_modules/'
]
})
.on('start', function () {
if (!called) {
called = true;
cb();
}
})
.on('restart', function () {
setTimeout(function () {
reload({ stream: false });
}, 1000);
});
});

gulp.task('browser-sync', gulp.series('nodemon', function() {
browserSync({
proxy: "localhost:3000", // local node app address
port: 5000, // use different port than above
notify: true
});
}));

gulp.task('default', gulp.series('browser-sync', function () {
gulp.watch(['public/*.html'], reload);
}));
`

I dont know how to format the code here. This works in gulp 4.0 and up

@mscyhw
Copy link

mscyhw commented May 8, 2020

This did the trick for me on gulp 4.0.2:

'use strict';

var gulp = require('gulp');
var browserSync = require('browser-sync');
var nodemon = require('gulp-nodemon');

gulp.task('nodemon', function (cb) {
	
    var started = false;
	
    return nodemon({
        script: 'server.js',
        ignore: [
            'gulpfile.js',
            'node_modules/'
            ]
	}).on('start', function () {
		if (!started) {
			cb();
			started = true; 
		} 
	});
});


gulp.task('browser-sync', gulp.series('nodemon', function() {
    browserSync.init(null, {
        proxy: "http://localhost:3000",
        files: ["public/*.html"],
        port: 5000,
    });
}));

gulp.task('default', gulp.series('browser-sync', function () {
}));

Code adapted from: https://gist.github.com/sogko/b53d33d4f3b40d3b4b2e and @alaksandarjesus

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment