-
-
Save dstroot/22525ae6e26109d3fc9d to your computer and use it in GitHub Desktop.
/** | |
* 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" | |
} | |
} |
Works great
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.
Works fantastic. Thanks so much!!
Thanks!
Working sweet here. Thanks!
Ps.: using "browser-sync": "2.18.6", "gulp-nodemon": "2.2.1", "express": "4.13.3"
@Jakobud Did you ever get your *.js files to update in the browser? I am experiencing the same issue.
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! (=
Thanks! Just work fine!
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
Thanks bro.work fine
`
/**
- 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
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
I leave this here too https://www.npmjs.com/package/fork-events