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);
});