How to enhance your front-end development workflow using Gulp
16 Gulp plugins to speed up your development process
My old workflow
Previous to this blog post I was using the following setup to create and maintain my front-end projects: I mostly wrote my CSS using the CSS preprocessor LESS, added LESS hat for some awesome mixins. And after that compiled it trough Koala.
I caught myself doing some tasks by hand like minifying, beautifying, prefixing and linting. Knowing this gave me a reason to optimize my front-end workflow to produce better code.
My projects also make use of Twitter Bootstrap and Bower.
What is Koala?
Koala is a GUI application for LESS, SASS, Compass and CoffeeScript compilation. Koala can run on Windows and UNIX based systems.
Koala masks over the Command Line Interface which everyone should need to know how to use.
What is Gulp?
Gulp is a task runner, meaning that you can use it to automate common tasks in the development of a project. It’s built on Node.js and both Gulp and your Gulp file are written in JavaScript.
You can write tasks to lint, beautify, minify and concatenate your JavaScript and CSS, add watchers, run multiple tasks and much more.
You can install Gulp through NPM also the Github repository offers a getting started guide.
How did I improve my workflow?
After I installed Gulp I went to the Gulp plugin registry, searched through the 1800+ plugins and picked the ones that could benefit my workflow.
How to use a Gulp plugin?
Most of the time a code example and documentation are provided on the NPM page of the plugin. In general it would be something like this:
/*
* A simple Gulp task template
*/
var gulp = require('gulp'),
pluginname = require('gulp-pluginname');gulp.task('default', function() {
return gulp.src('source_path')
.pipe(pluginname({options}))
.pipe(gulp.dest('destination_path'));
});
There are 12 that are mentionable plugins that really improved my workflow I’ve listed them below.
[1] gulp-plumber
gulp-plumber prevents pipe breaking caused by errors from gulp plugins (when an error occurs gulp watch tasks are automatically stopped).
Pipe breaking is caused by a bug you can read more about it in this Github gist
[2] gulp-less
gulp-less allows you to compile your LESS to CSS if written in the LESS syntax.
[3] gulp-cssbeautify
gulp-cssbeautify allows you to automatically format your CSS code to be consistent and easy to read.
[4] gulp-csslint
gulp-csslint allows you to lint your CSS code. Linting is the process of running a program that will analyse code for potential errors. You can lint your CSS files to write better code.
[5] gulp-jsbeautifier
gulp-jsbeautifier allows you to automatically format your JavaScript code to be consistent and easy to read. gulp-jsbeautifier can also beautify your html templates.
I personally use this file for configuration .jsbeautifyrc
[6] gulp-jshint
gulp-jshint allows you to lint your JavaScript code. Linting is the process of running a program that will analyse code for potential errors. You can lint your JavaScript files to write better code.
[7] gulp-minify-css
gulp-minify-css is a wrapper around clean-css that allows you to minify your CSS in an efficient way. You can minify your CSS files to gain performance.
[8] gulp-uglify
gulp-uglify allows you to minify your JavaScript in an efficient way using the UglifyJS2 library. You can minify your JavaScript files to gain performance.
[9] gulp-sourcemaps
gulp-sourcemaps allows you to generate sourcemaps. A source map provides a way of mapping code within a compressed file back to it’s original position in a source file.
sourcemaps also work with JavaScript if you want to learn more about it Matt West from treehouse has written a good blog about it.
[10] gulp-strip-comments
gulp-strip-comments allows you to strip comments out of your Javascript and CSS files, when concatenating the file through gulp-concat comments could cause errors.
[11] gulp-autoprefixer
gulp-autoprefixer allows you to prefix your CSS automatically, prefixes are used to gain browser compatibility.
[12] gulp-concat
gulp-concat allows you to concatenate your JavaScript and CSS files to a single file. You can concatenate your files to gain performance.
[13] gulp-gzip
gulp-gzip allows you to gzip your files, you can gzip your files to gain performance.
[14] gulp-util
gulp-util allows you to use different utilities for gulp plugins. I especially like the colour console output logging.
[15] gulp-load-plugins
gulp-load-plugins allows you to load multiple Gulp plugins and attaches them to the global scope so you don’t have all the require’s in your Gulpfile.
[16] browser-sync
browser-sync allows you to setup a lightweight web server with support for Live Reload & Browser Syncing. The server would be accessible from multiple devices.
Run multiple Gulp tasks
Gulp allows you to run a set of tasks after each other by providing an array of tasks (strings) as second parameter for the task method.
/*
* Run multiple tasks
*/
gulp.task('default', ['gulp-task-1', 'gulp-task-2']);Watch a directory and run on save
Gulp allows you to watch a directory and run a or multiple tasks on save.
/*
* Watch a directory and run on save
*/
gulp.task('watch', function() {
gulp.watch('path_to_watch', ['gulp-task']);
});Conclusion
Adding Gulp to my workflow was a very big improvement, I can work more efficient and faster than ever before.
My projects will contain files that are faster to load and contain less to zero errors.
If you don’t use Gulp yet try to apply it to one of your projects and see if you can spot an improvement in your workflow.
My gulpfile
Two users on Reddit asked me to attach my gulpfile to the story so I’ve created this Github gist for it.
If you enjoyed reading this article, it would mean a lot if you recommend it using the ♥ icon and share with your colleagues and friends. Also follow me on twitter @0x1ad2 and feel free to ask me anything.
