bishawjit-das
10/18/2016 - 4:14 AM

Gulp recipe: Jade, Sass, Livereload and static server

Gulp recipe: Jade, Sass, Livereload and static server

{
  "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"
  }
}
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']);