Need help settup gulp-express to offer LiveReload

[jeud]

Hi

I'm developing an Express.js app, so I'm looking for a correct way to setup gulpfile.js to offer restarting the Express.js app with LiveReload capabilities

This is my current gulpfile.js

var gulp = require('gulp');
var express = require('gulp-express');

gulp.task('express', function() {
    express.run(['app.js']);

    gulp.watch(['app.js', 'routes/**/*.js'], [express.run]);
});

With this gulpfile.js, gulp offers me to restart the Express.js app whenever I edit the .js files

But no LiveReload capabilities at all, I read from the documentation and tried to edit the gulpfile.js with gulp.watch(['app.js', 'routes/**/*.js'], [express.run, express.notify]);, unfortunately this causes me gulp error when I edit the .js files

Please help me config gulpfile.js correctly to offer both restarting the Express.js app and LiveReload capabilities

Thanks

[gimm]

@jeud you gulpfile seems fine. I think you don't have the livereload is because you don't have livereload.js within your pages. You can have it in the following way:

• use connect-livereload middile ware;
• use livereload chrome plugin;
• include livereload.js mannually in your html files;

I recommend the first approach, you can check it out at the very bottom of the README.md

[jeud]

@gimm, thanks for your comment

I'm sorry that I forgot to mention that I have installed Chrome's LiveReload plugin. I tried to read from the documentation and found you won't need connect-livereload if you have livereload plugin for your browser, so I thought the code from my gulpfile.js should be working right away

I tried to play around but so wondering that nothing seems to happen with notify() when using as gulp.watch(['*.html'], express.notify); I meant the console just shown nothing

Also when trying to use gulp.watch(['app.js', 'routes/**/*.js'], [express.run, express.notify]); I got error at the console when watch detected the changes

[gimm]

@jeud I just tried with livereload plugin and it works. Coud you please verify that you have the livereload.js loaded with your page? If it's not, click the livereload icon.

And I've updated the package with some console output, so that you can make sure the notify is actually working. But you need to set DEBUG environment variable to before you run gulp command, for windows: set DEBUG=gulp-express

run and notify are not supposed to use together.

[MichaelJCole]

For whatever reason this little button was clicked off for me. Very helpful, thanks!

Why do you say "run and notify are not supposed to use together."?

This was my ultimate solution. Is there a simpler way? Thanks!

// Start a server
gulp.task('dev', ['build', 'lint'], function() {
  // Start the server at the beginning of the task 
  plugins.express.run([config.server.start]);
  gulp.watch([config.app.src], ['appEdit']);
  gulp.watch([config.server.src], ['serverEdit']);
});
gulp.task('appEdit', function() {
  return runSequence('clear', 'build', 'lint', 'reloadBrowser');
});
gulp.task('serverEdit', function() {
  return runSequence('clear', 'lint', 'reloadServer', 'reloadBrowser');
});
gulp.task('reloadBrowser', function() {
  return gulp.src(config.app.dest)
  .pipe(plugins.express.notify());
});
gulp.task('reloadServer', function(event) {
  return plugins.express.run([config.server.start]);
});

[gimm]

@MichaelJCole run and notify not use together, I mean, usually, there's no need for both in the same time. Why need to reload browser on serverEdit, if you don't have anything related to the page's appearance under your server.config.src, you might not need to reload the browser.

[MichaelJCole]

@gimm, aha! You're right! Thanks!

[jeud]

Dear @gimm

Sorry I was out of town so I lately gave you more information.

I use "express": "^4.12.2", "gulp-express": "^0.3.2"

app.js

var express = require('express');
var app = module.exports.app = exports.app = express();

app.get('/', function(req, res) {
    res.send('tutor4dev Hello');
});

app.listen(3000);

gulpfile.js

var gulp = require('gulp');
var server = require('gulp-express');

gulp.task('server', function() {
    server.run(['app.js']);

gulp.watch(['app/**/*.html'], server.notify);
gulp.watch(['app.js', 'routes/**/*.js'], [server.run]);
});

gulp.task('default', ['server']);

I confirm that I have installed Chrome LiveReload plugin

After starting gulp my console looked like this

After editing gulp's task detected the changes

The express app has become latest version, but no livereloads, and there was some errors in the development tool's console

When I tried to extend the gulp.watch() with any additional tasks (@MichaelJCole 's example), e.g. gulp.watch(['app.js', 'routes/**/*.js'], [server.run, 'reloadBrowser']);, gulp will raise errors after the edit

Please help.

[gimm]

@jeud no problem at all. if it possible, could you please sent me a copy of your app so I can try it out.

[jeud]

Dear @gimm

This is a link for my Hello World Express.js App

P.S. Do I need connect-livereload or anything else?

Thanks so much for your help.

[gimm]

@jeud change the gulpfile.js into this:

var gulp = require('gulp');
var server = require('gulp-express');

gulp.task('server', function() {
    server.run(['app.js']);

    gulp.watch(['app/**/*.html'], server.notify);
    gulp.watch(['app.js', 'routes/**/*.js'], function(event){
        server.run();
        server.notify(event);
    });
});

gulp.task('default', ['server']);

[jeud]

@gimm

It's now working like magic to me :)

Thanks for your help and this wonderful gulp's plugin.

[gimm]

Glad to be helpful!