Setting up Gulp with Express and Livereload

So this is pretty basic and there're plenty of alternatives and tutorials to setup a basic gulpfile with Node Express and Livereload. I tried them all but couldn't get any of them working as I wanted. So I gave up copying and pasting someone else's code and set up my own gulpfile. This is yet another alternative you can choose from. I'm going to be setting a gulpfile for livereloading the browser whenever there's a change in a .scss .js or .ejs (my templating engine) file, and restarting the server when there's a change on server.js.

1 - First of all go ahead and install all the node dependencies you're going to be using on your gulpfile.

npm install --save-dev gulp jshint gulp-nodemon gulp-ruby-sass gulp-autoprefixer gulp-jshint gulp-livereload  

2 - Now include all of your dependencies in your gulpfile.js as such:

var gulp = require('gulp');  
var nodemon = require('gulp-nodemon');  
var sass = require('gulp-ruby-sass');  
var autoprefixer = require('gulp-autoprefixer');  
var jshint = require('gulp-jshint');  
var livereload = require('gulp-livereload');  

3 - Set a task for SASS preprocessing and auto vendor prefixing. I'm leaving minification out in development.

gulp.task('styles', function() {  
  return sass('public/css/scss/*.scss', { style: 'expanded' })
    .pipe(autoprefixer('last 2 version'))
    .pipe(gulp.dest('public/css'))
    .pipe(livereload());
});

4 - Set a task for .js scripts jshint reporting. Again, I'm leaving minification and concatenation out in development.

gulp.task('scripts', function() {  
  return gulp.src('public/js/*.js')
    .pipe(jshint('.jshintrc'))
    .pipe(jshint.reporter('default'))
    .pipe(livereload());
});

5 - Create a task to reload the browser whenever an .ejs file gets changed.

gulp.task('ejs',function(){  
    return gulp.src('views/**/*.ejs')
    .pipe(livereload());
});

6 - Now create a task that will watch any of these files being changed and execute the corresponding task. Remember to call the listen function from livereload because it's not automatically called. Important: You'll have to download the livereload plugin for your browser. Don't try to do livereload without the plugin, just go for it.

gulp.task('watch', function() {  
    livereload.listen();
    gulp.watch('public/css/**/*.scss', ['styles']);
    gulp.watch('public/js/*.js', ['scripts']);
    gulp.watch('views/**/*.ejs', ['ejs']);
});

7 - Set a up task to start the nodemon process. This is the actual task that runs the Express server. I'm ignoring any file under the public folder because I don't want to restart the server whenever I change the angular controllers or any frontend script in general.

gulp.task('server',function(){  
    nodemon({
        'script': 'server.js',
        'ignore': 'public/js/*.js'
    });
});

8 - Create a helper task to run both the watch and server tasks.

gulp.task('serve', ['server','watch']);  

Now run gulp serve on terminal and you'll have your Express server running and listening to the port you've set up on your server.js file.