Gulp recipe: Jade, Sass, Livereload and static server

gulpfile.js

var gulp        = require('gulp'),
    gutil       = require('gulp-util'),
    sass        = require('gulp-sass'),
    csso        = require('gulp-csso'),
    uglify      = require('gulp-uglify'),
    jade        = require('gulp-jade'),
    concat      = require('gulp-concat'),
    livereload  = require('gulp-livereload'), // Livereload plugin needed: https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
    tinylr      = require('tiny-lr'),
    express     = require('express'),
    app         = express(),
    marked      = require('marked'), // For :markdown filter in jade
    path        = require('path'),
    server      = tinylr();


// --- Basic Tasks ---
gulp.task('css', function() {
  return gulp.src('src/assets/stylesheets/*.scss')
    .pipe( 
      sass( { 
        includePaths: ['src/assets/stylesheets'],
        errLogToConsole: true
      } ) )
    .pipe( csso() )
    .pipe( gulp.dest('dist/assets/stylesheets/') )
    .pipe( livereload( server ));
});

gulp.task('js', function() {
  return gulp.src('src/assets/scripts/*.js')
    .pipe( uglify() )
    .pipe( concat('all.min.js'))
    .pipe( gulp.dest('dist/assets/scripts/'))
    .pipe( livereload( server ));
});

gulp.task('templates', function() {
  return gulp.src('src/*.jade')
    .pipe(jade({
      pretty: true
    }))
    .pipe(gulp.dest('dist/'))
    .pipe( livereload( server ));
});

gulp.task('express', function() {
  app.use(express.static(path.resolve('./dist')));
  app.listen(1337);
  gutil.log('Listening on port: 1337');
});

gulp.task('watch', function () {
  server.listen(35729, function (err) {
    if (err) {
      return console.log(err);
    }

    gulp.watch('src/assets/stylesheets/*.scss',['css']);

    gulp.watch('src/assets/js/*.js',['js']);

    gulp.watch('src/*.jade',['templates']);
    
  });
});

// Default Task
gulp.task('default', ['js','css','templates','express','watch']);

package.json

{
  "name": "gulp",
  "version": "0.0.1",
  "description": "Gulp Recipe - Jade, Sass, Livereload and static server",
  "author": "Chris Kjaer",
  "devDependencies": {
    "gulp-concat": "~2.1.7",
    "gulp-util": "~2.2.12",
    "gulp": "~3.5.0",
    "gulp-uglify": "~0.1.0",
    "gulp-csso": "~0.1.8",
    "gulp-sass": "~0.4.1",
    "gulp-jade": "~0.3.0",
    "gulp-livereload": "~0.2.0",
    "tiny-lr": "0.0.5",
    "express": "~3.4.8",
    "marked": "~0.3.0"
  }
}

hello, thank you for your sharing, but this version dont really trigger browser to refresh,
I read about article
and merge his code with yours
result is here https://gist.github.com/yhsiang/8664407

Ahh, that's because I'm using the LiveReload plugin. Without that, it wont refresh.

I'll add it to the gist.

and I found a new mehtod, just move gulp.watch out of server.listen callback, it will refresh.
I updated my gist :)

I didn't need to install 'tiny-lr' to get 'livereload' to work. I'm guessing this is because I have the LiveReload UI for Mac installed previously, but I'm not certain.

Thanks for sharing this one! I needed a version with coffee script and javascript and it took me a while to figure out the event-stream merge method.

Maybe someone else finds it useful https://gist.github.com/cherta/11399818.

I made a fork from @trsvdos 's SASS version to LESS and added a static server using the lightweight gulp-connect rather than express with LiveReload built-in. There's also a production environment mode so you can get up and running on a live site. Let me know if you find it useful. You can check it out here

It is heavily in development. So please create issues.

Thank you for sharing.

Can you share you your using this with marked ?

I love the concept for this Gulp/SASS/Jade/LiveReload app and I was wondering if someone has plans to make it work again? I tried to sift through and update the dependencies myself but many of them have changed a lot and I’m no NPM/Gulp expert :(