Using browser-sync with node.js app

Question

I have an existing node app. My Node directory structure is setup like this:

./
  node_modules/
  src/
    views/
      index.html
      ...
    server.js
           


        

Answer 1

Using the express generator default folder structure with the start script in bin\www, and using the ejs template, this is how i modified my gulpfile.js :

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


gulp.task('browser-sync', ['nodemon'], function() {
    browserSync.init(null, {
        proxy: "http://localhost:8000", // port of node server
    });
});

gulp.task('default', ['browser-sync'], function () {
    gulp.watch(["./views/*.ejs"], reload);
});

gulp.task('nodemon', function (cb) {
    var callbackCalled = false;
    return nodemon({
        script: './bin/www', 
        env: {
        PORT: 8000
    }}).on('start', function () {
        if (!callbackCalled) {
            callbackCalled = true;
            cb();
        }
    });
});

Notice that am watching for any files that end in .ejs. I also got a problem when using nodemon with the port in use, so i added an env to pass the port as 8000, env: { PORT: 8000 }