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"
  }
}

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 :(