Basic Gulp File
/*----------------------------------------------------------------------------------------------
GulpJS
www.gulpjs.com
www.gulpjs.com/plugins
Gulp Documentation on GitHub: www.github.com/gulpjs/gulp/blob/master/docs/README.md
1. Download all package modules => 'npm install' if [package.json] with dependencies exist
2. Start gulp => 'gulp'
----------------------------------------------------------------------------------------------*/
// Gulp with additional plugins
var gulp = require('gulp'), // npm install gulp --save
uglify = require('gulp-uglify'), // npm install gulp-uglify --save
plumber = require('gulp-plumber'), // npm install gulp-plumber --save
imagemin = require('gulp-imagemin'), // npm install gulp-imagemin --save
cleanCSS = require('gulp-clean-css'), // npm install gulp-clean-css --save
autoprefixer = require('gulp-autoprefixer'), // npm install gulp-autoprefixer --save
rename = require('gulp-rename'), // npm install gulp-rename --save
sass = require('gulp-sass'), // npm install gulp-sass --save
sourcemaps = require('gulp-sourcemaps'), // npm install gulp-sourcemaps --save
sassGlob = require('gulp-sass-glob'); // npm install gulp-sass-glob --save
// Error Log Function (Alternative to Plumber)
function errorLog(error) {
console.error.bind(error);
this.emit('end');
}
// Compress Images
gulp.task('image', function(){
gulp.src('assets/img/**') // Anything in our img folder (Use two stars [**] to target any image within folder and its sub-folders)
.pipe(imagemin()) // Run imagemin() function
.pipe(gulp.dest('assets/build/img')); // Compressed image destination
});
// Convert SASS to CSS
gulp.task('sass', function (){
return gulp.src('assets/scss/*.scss')
.pipe(sassGlob())
.pipe(sourcemaps.init())
.pipe(sass({
errLogToConsole: true,
outputStyle: 'expanded'
})).on('error', sass.logError)
.pipe(autoprefixer())
.pipe(sourcemaps.write())
.pipe(gulp.dest('assets/build/css'));
});
// Compress CSS Styles
gulp.task('minify-css', function() {
return gulp.src('assets/build/css/main.css')
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('assets/build/css/'));
});
// Compresses Scripts
gulp.task('scripts', function() {
// run for any js file inside js directory
gulp.src('assets/js/*.js')
.pipe(plumber()) // Plumber function to prevent watch from stopping if errors
.pipe(uglify()) // Uglify function to compress js
// .on('error', errorLog) Alternative to Plumber
.pipe(gulp.dest('assets/build/js')); // Compressed js destination
});
// Watch Task (Sass, Image, Scripts, etc)
// Watch for any change. If yes, run the task
gulp.task('watch', function() {
gulp.watch('assets/img/**', ['image']);
gulp.watch('assets/scss/**/*', ['sass']);
gulp.watch('assets/build/css/main.css', ['minify-css']);
gulp.watch('assets/js/*.js', ['scripts']);
});
gulp.task('default', ['image', 'scripts', 'minify-css', 'sass', 'watch']); // Place all gulp tasks