Playing with gulp.js #javascript #gulp

gulpfile.js

/**
 * Gulp tutorial
 * Based on: http://markgoodyear.com/2014/01/getting-started-with-gulp/
 */

// Requires gulp and gulp plugins
var gulp = require('gulp'),
    less = require('gulp-less'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    clean = require('gulp-clean'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload');
    svgSprites = require('gulp-svg-sprites');

// require node.js path module
var path = require('path');

// instances Livereload server
var server = livereload();

// starts a express webserver on port 4000 (not required if you are not using express webserver)
function startExpress() {
  var express = require('express');
  var app = express();
  app.use(express.static(__dirname));
  app.listen(4000);
}

// For SVG Sprites
var svg = svgSprites.svg;
var png = svgSprites.png;
var svgConfig = {
  cssFile: "../css/icons.css",
  svgPath: "../%f",
  pngPath: "../%f",
  svg: {
      sprite: "main_assets.svg"
  }
};



/* Tasks definition
----------------------------------------------------------------------------- */
// Default task: after executing dependencies (clean) runs the other tasks
gulp.task('default', ['clean'], function() {
  // startExpress(); // (not required if you are not using express webserver)
  gulp.start('styles', 'scripts', 'images');
});

// Task to compile, autoprefix and compress main .less file
gulp.task('styles', function() {
  return gulp.src('./assets_src/css/main.less')
    .pipe( less() )
    .pipe( autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe( gulp.dest('./css') )
    .pipe( rename( {suffix: '.min'} ) )
    .pipe( minifycss() )
    .pipe( gulp.dest('./css') )
    .pipe( livereload(35729) )
    .pipe( notify({ message: 'Styles task complete' }) );
});

// Task to analyse(hint), concat and compress javascript files
gulp.task('scripts', function() {
  return gulp.src('./assets_src/js/**/*.js')
    .pipe( jshint('.jshintrc') )
    .pipe( jshint.reporter('default') )
    .pipe( concat('compiled.js') )
    .pipe( gulp.dest('./js') )
    .pipe( rename( {suffix: '.min'} ) )
    .pipe( uglify() )
    .pipe( gulp.dest('./js') )
    .pipe(notify({ message: 'Scripts task complete' }));
});

// Task to optimize images
gulp.task('images', function() {
  return gulp.src('./assets_src/img/**/*')
    .pipe( cache( imagemin( { optimizationLevel: 5, progressive: true, interlaced: true } ) ) )
    .pipe( gulp.dest('./img') )
    .pipe( notify( { message: 'Images task complete' } ) );
});

// Task to clean output directories
gulp.task('clean', function() {
  return gulp.src( ['./css/**/*', './js/**/*', './img/**/*'], {read: false} )
    .pipe( clean() );
});

// Tastk to create SVG icon sprites
gulp.task('icons', function() {
  return gulp.src('./assets_src/icons/**/*.svg')
    .pipe( svg(svgConfig) )
    .pipe( gulp.dest('./img') )
    .pipe( png() )
    .pipe( notify({ message: 'Icons task complete' }) );
});

// Task to watch for changes in sources files and automatically execute appropiate task
gulp.task('watch', function() {
  // startExpress(); // (not required if you are not using express webserver)

  // Watch .less files (and notifies Livereload if changed)
  gulp.watch('./assets_src/css/**/*.less', ['styles'] );
  // Watch .js files
  gulp.watch('./assets_src/js/**/*.js', ['scripts'] );
  // Watch image files
  gulp.watch('./assets_src/img/**/*', ['images'] );
  // Watch for icon files
  gulp.watch('./assets_src/icons/**/*', ['images'] );

  gulp.watch('./**/*.html').on('change', function(file) {
      server.changed(file.path);
  });

});


// Task to start webserver on port 4000 (not required if you are not using express webserver)
gulp.task('start_webserver', function() {
  startExpress();
});