(Happy Valentine’s Day, ya’ll. Get off the computer and go buy something nice for your woman.)
Sometimes I like to pretend that I know stuff, when I really don’t. Gulp is one of those things. 🙂
I need to get better at finding solutions to a lot of the repetitive tasks that I do on a daily basis. Up until now, let’s say I was about to push some production code to the web. Of course I needed to minify the CSS first. So I would copy the code, hit up CSS Minifier, paste the code back into my CSS file, and then rename the file, styles.min.css. This wouldn’t be that big of an issue if I only did it once upon completion of a site. But it never really worked out that way. I’d forget to change a specific style last minute, and then I’d have to copy all of my code into CSS Minifier and do it all again.
Wouldn’t it be great if there were a service that did all of this for you, automatically? You’re in luck! They’re called “Task Runners”. I’m going to be focusing on “Gulp”, which is a JavaScript task runner, built off of Node.js.
Now, to many of you, you’ve probably been using a task runner of some sort for years. For a long time, Grunt has been the big name in the game. Not too long ago, Gulp emerged and has been hogging the spotlight. It’s not only faster at rendering, but it also has an easier-to-read syntax.
Now, I’m too lazy to reinvent the wheel and write a tutorial on how to install and run gulp. This guy does a much better job than I could do, anyway.
But I did at least want to post my gulpfile and say how freaking awesome it is. By simply running the gulp command, in less than second, I can minify my CSS, JS, and HTML, concatenate multiple files into one, rename them automatically, add in browser prefixes, and then reload the browser window. In less than a second. Boom. Pretty nifty, huh? Additionally, my gulpfile will watch for any changes to those files, and rerun all of those tanks without me doing anything. Dope.
var gulp = require('gulp');
/**********************************************
****************** Modules ********************
***********************************************/
var sass = require('gulp-ruby-sass'); //Compiles SASS
var autoprefix = require('gulp-autoprefixer'); //Automatically throws in browser prefixes
var minifycss = require('gulp-minify-css'); //Minifies CSS
var rename = require("gulp-rename"); //Renames files to .min after minifying
var minifyhtml = require('gulp-minify-html'); //Minifies the HTML
var concat = require('gulp-concat'); //Concatenates all source files into one file
var uglify = require('gulp-uglify'); //Removes whitespaces from JavaScript
var imagemin = require('gulp-imagemin'); //Compresses images
var livereload = require('gulp-livereload'); //Live reload
var plumber = require('gulp-plumber'); //Error handling
/**********************************************
****************** Functions ********************
***********************************************/
// css auto-prefix, minify, and rename
gulp.task('styles', function() {
return sass('src/styles/', {style:'expanded'}).on('error', function(handleError){ console.log('Error: There's a problem with your SASS, stupid. Fix that shiz.'); })
.pipe(autoprefix('last 2 versions'))
.pipe(minifycss())
.pipe(rename({suffix:'.min'}))
.pipe(gulp.dest('build/styles/'))
.pipe(livereload());
});
// minify new images
gulp.task('imagemin', function() {
gulp.src('src/images/*.jpg').on('error', function(handleError){ console.log('Error: There's a problem with your images, stupid. Fix that shiz.'); })
.pipe(imagemin())
.pipe(gulp.dest('build/images/'));
});
// minify new or changed HTML pages
gulp.task('html', function() {
gulp.src('src/*.html')
.pipe(minifyhtml())
.pipe(gulp.dest('build/'))
.pipe(livereload());
});
// JS concat, strip debugging and minify
gulp.task('scripts', function() {
gulp.src('src/scripts/*.js')
.pipe(concat('script.js'))
.pipe(uglify())
.pipe(rename({suffix:'.min'}))
.pipe(gulp.dest('build/scripts/'))
.pipe(livereload());
});
/**********************************************
************ Watch & Build Tasks **************
***********************************************/
gulp.task('default', ['styles', 'html', 'scripts', 'imagemin'], function() {
// watch for CSS changes & minify
gulp.watch('./src/styles/*.scss', function() {
livereload.listen();
gulp.run('styles');
});
// watch for html & minify
gulp.watch('./src/*.html', function() {
livereload.listen();
gulp.run('html');
});
// watch for JS changes
gulp.watch('./src/scripts/*.js', function() {
livereload.listen();
gulp.run('scripts');
});
// watch for new images
gulp.watch('./src/images/*.jpg', function() {
gulp.run('imagemin');
});
});
This isn’t even the tip of the iceberg. There are hundreds of gulp plugins, and I have yet to play with the majority of them. But these seem to be the most basic/common plugins, and so far, they’ve proved invaluable.
