Introducing Gulp

Published on , in Tooling with no comments .

It’s been a very long time since my last post. The last few years have been very busy for me and a lot has changed in that time. I’m getting back to blogging with this little post about Gulp.

What About Grunt?

I started off using Grunt at the end of 2013 and I even wrote a blog post on it. However, that didn’t last long. After just a couple of months using Grunt, I’d switch to Gulp. There wasn’t really a problem with Grunt as such, but Gulp had just started making waves so I decided to check it out. This topic has been covered many times and it’s nothing new, so I won’t focus on it.

In the end I decided Gulp was the best option for me. I liked that it was:

  • “Code over configuration.”
  • Uses Node streams which means Gulp is faster and kinder to your SSD than Grunt, since it avoids writing and reading lots of temporary files to disk while it runs tasks.
  • Follows the Unix philosophy in that plugins should do one thing well and one thing only, and that they should work together. With Grunt plugins, there can be a lot of overlap in functionality as they do more than one thing. For example, “grunt-contrib-cssmin” not only minifies CSS, but it also concatenates multiple files — a job also done by “grunt-contrib-concat.”

My Set-up

So in the time since then my Gulp set-up has been tweaked and updated a few times but for the most part the core task list has remained the same. If you’d like to check it out you can find it on GitHub. My Gulp set-up achieves the following:

  • Compile Sass to CSS
  • Auto-prefix CSS (write W3C syntax, vendor prefixes added automagically)
  • Minify CSS
  • Concatenate CSS files in plugins folder to a single plugins CSS file
  • Concatenate JS files into a single app.js
  • Concatenate JS files in plugins folder to a single plugins JS file
  • Minify JS
  • Run JSHint
  • Add a banner to the top of the generated files with the build date
  • Live updates & remote inspection with BrowserSync
  • Notifications on task completion

The Tasks

As you can see there’s nothing revolutionary there. But for someone getting started, it might just help you on your way. To achieve that, we have the following tasks:

  • jshint
    • Runs the JSHint code quality tool on JavaScript files
  • scripts
    • Takes source JavaScript files and concatenates them into a single app.js file
    • Adds a banner with the build date
    • Creates a minified version as app.min.js and creates a sourcemap
  • plugin-scripts
    • Concatenates plugins as plugins.min.js
  • styles
    • Takes source Sass files and compiles them to CSS
    • Generates sourcemaps
    • Runs autoprefixer on them for vendor prefixes
    • Saves it in the CSS directory as styles.css
    • Creates a minified version as styles.min.css
    • Adds the project banner as in the scripts task
  • plugin-styles
    • Concatenates plugin CSS files
    • Adds the project banner
    • Saves a single minified file
  • browser-sync
    • Mirrors your actions across multiple browsers including those on other devices
    • CSS changes are injected into the page in all browsers — refresh free (perfect for pages with AJAX actions)
    • JS changes trigger a refresh in all browsers
    • Remote inspection
  • watch
    • Watches for changes and automatically runs the appropriate tasks (styles for CSS files, jshint and scripts for JavaScript files)
  • watch-and-sync
    • Watches for changes and automatically runs the appropriate tasks while using BrowserSync
  • default
    • Runs jshint, scripts and styles tasks
    • Watches for further changes and automatically runs the appropriate tasks (styles for CSS files, jshint and scripts for JavaScript files)

To run any of the tasks above, navigate to the project root folder and type the following command in your terminal:

gulp [task-name]

The task name is optional, without it Gulp will run the default task.

Leave a Comment