robdecker
2/9/2016 - 11:54 PM

Sample Gulp setup

Sample Gulp setup

{
  "name": "gulp-setup",
  "version": "1.0.0",
  "scripts": {
    "postinstall": "find node_modules/ -name '*.info' -type f -delete"
  },
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-changed": "^1.3.0",
    "gulp-css-globbing": "^0.1.8",
    "gulp-imagemin": "^2.4.0",
    "gulp-jshint": "^2.0.0",
    "gulp-livereload": "^3.8.1",
    "gulp-notify": "^2.2.0",
    "gulp-plumber": "^1.0.1",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.1.1",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-watch": "^4.3.5",
    "jshint": "^2.9.1",
    "jshint-stylish": "^2.1.0"
  }
}
'use strict';

// Include Gulp
var gulp = require('gulp'),

// Include Plug-ins
changed = require('gulp-changed'),
globbing = require('gulp-css-globbing'),
imagemin = require('gulp-imagemin'),
jshint = require('gulp-jshint'),
livereload = require('gulp-livereload'),
notify = require('gulp-notify'),
plumber = require('gulp-plumber'),
prefix = require('gulp-autoprefixer'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
stylish = require('jshint-stylish'),
watch = require('gulp-watch');


////////////////////////////////////////////////////////////////////////////////
// Javascript
////////////////////////////////////////////////////////////////////////////////

// JS hint
gulp.task('lint', function() {
  return gulp.src([
      'js/theme/**.*.js'
    ])
    .pipe(jshint())
    .pipe(jshint.reporter(stylish));
});

////////////////////////////////////////////////////////////////////////////////
// Sass
////////////////////////////////////////////////////////////////////////////////

// Sass files
gulp.task('sass', function() {
  var onError = function(err) {
    notify.onError({
      title:    "Gulp",
      subtitle: "Failure!",
      message:  "Error: <%= error.message %>",
      sound:    "Beep"
    })(err);
    this.emit('end');
  };

  return gulp.src([
      'sass/*.scss'
    ])
    .pipe(plumber({ errorHandler: onError }))
    .pipe(globbing({
      extensions: ['.scss']
    }))
    .pipe(sourcemaps.init())
    .pipe(globbing())
    .pipe(sass())
    .pipe(prefix('last 2 versions', '> 1%', 'ie 8'))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./css'));
});

////////////////////////////////////////////////////////////////////////////////
// Images
////////////////////////////////////////////////////////////////////////////////

// Minify images
gulp.task('imagemin', function() {
  return gulp.src([
      'images/src/**/*'
    ])
    .pipe(changed('./images'))
    .pipe(imagemin())
    .pipe(gulp.dest('./images'));
});

////////////////////////////////////////////////////////////////////////////////
// Default task
////////////////////////////////////////////////////////////////////////////////

gulp.task('default', ['lint', 'sass', 'imagemin'], function() {
  gulp.watch('js/**/*', ['lint']);
  gulp.watch('sass/**/*', ['sass']);
  gulp.watch('images/src/**/*', ['imagemin']);
});

////////////////////////////////////////////////////////////////////////////////
// Live reload task
////////////////////////////////////////////////////////////////////////////////

gulp.task('lr', ['default'], function() {
  livereload.listen();

  gulp.watch('./css/style.css').on('change', livereload.changed);
});