I have a simple express 4.x test application. I know you can use gulp to benefit from auto-reloading, so after changing any content on the server, it will automatically restart.

I managed to setup the handlebars template engine with express.

My file system is very simple:

• app/main.js -> is the server
• app/gulp.js -> is the gulp file
• app/views/*.hbs -> contains my handlebars files
• app/views/layouts/*.hbs -> contains my handlebars layout files

I am using the gulp-live-server and I have a feeling I am missing something (only watched a couple of tutorials to find out what gulp is)

app/gulp.js - 2nd example from the gulp-live-server

var gulp = require('gulp');
var gls  = require('gulp-live-server');

gulp.task('serve', function() {
    //1. run your script as a server
    var server = gls.new('main.js');
    server.start();

    //2. run script with cwd args, e.g. the harmony flag
    var server = gls.new(['--harmony', 'main.js']);
    //this will achieve `node --harmony main.js`
    //you can access cwd args in `main.js` via `process.argv`
    server.start();

    //use gulp.watch to trigger server actions(notify, start or stop)
    gulp.watch(['views/*.hbs', 'static/views/layouts.hbs'], function (file) {
      server.notify.apply(server, [file]);
    });
    gulp.watch('main.js', server.start.bind(server)); //restart my server 

    // Note: try wrapping in a function if getting an error like `TypeError: Bad argument at TypeError (native) at ChildProcess.spawn`
    gulp.watch('main.js', function() {
      server.start.bind(server)()
    });
});

app/main.js

var express = require( 'express' );
var hbs = require( 'express-handlebars' );

var app = express();

app.engine( 'hbs',
            hbs( { extname: '.hbs',
                    defaultLayout: 'layout',
                    layoutsDir: __dirname + "/views/layouts/" } ) );
app.set( 'view engine', 'hbs' );

app.get( "/", function( req, res ) {
    res.render( "index.hbs", {title: "World"} );
} );

app.use( '/public', express.static( 'public' ) );

var port = Number( process.env.PORT || 5000 );
app.listen( port );

What I was expecting:

After running a node gulp.js serve the application would start listening on the port 5000 and be restarted anytime the content on views/* would be changed.

**What is actually happening: **

The gulp only starts and finishes execution.

Configuration specifics:

Potential problem during gulp installation(?):

Please notice the deprecated graceful component..

I am sure I am missing something terribly obvious :))

If node gulp.js serve means you are executing the app/gulp.js file you posted above, then this can't work. The app/gulp.js file only defines your tasks. It doesn't actually execute them.

To execute the tasks you need to install the gulp command line tool. The easiest way is to just install gulp globally:

npm install -g gulp

You need to make sure that the location where the command line tool is installed (npm will log the location) is in your PATH environment variable. Just typing gulp on the command line will tell you if that is the case.

Next you need to rename your gulpfile from app/gulp.js to app/gulpfile.js which is where the gulp command line tool looks for your task definitions.

Now you can run gulp serve from inside the app/ directory, which should execute the serve task defined in app/gulpfile.js.

more