Automating web development process with Node and Gulp

I’ve been designing and developing websites for years now and used most of the decent tools to help out along the way such as text editors to do the coding and design programs to mock up wireframes, but this post is about the more technical side of development tools - automating your web development process.

When starting out to build websites, perhaps coding in Dreamweaver as I did, there are a lot of tasks which seem to be repetitive between projects. These tasks may include:

• Compiling SASS into CSS
• Minifying CSS and JS files
• Optimising images
• Reloading the web browser

This is where process automation tools can help, as they can do this for you in the Terminal or command line. There are a few programs out there such as Grunt or Broccoli, but my favourite is Gulp, and they all run using Node.js.

Take a step back, what is Node.js?

I remember back when I began using node and there was a lot of confusion for me about all these types of Node packages to choose from, so I’ll start by clearing that up if you’re new. Let’s start with Node.js. This is a Javascript engine which can run server side or client side with the ability to help build applications. It leverages “packages” from it’s package library called npm (Node Package Manager) to do this. On it’s own, Node.js is just an environment, so how the application works is up to the developer to choose the right packages, giving it the benefit of being small and efficient.

Some popular Node packages are Gulp, Express (web framework for server-side Javascript development), and Lodash (helps manage objects and arrays). Most of my confusion came from which packages to use to do certain things. Comparing Gulp, Grunt, Browserify, Bower, Webpack etc was a pain, but that’s for another post. For now, if you’re interested in getting into Node I’d recommend using Gulp or Webpack for task automation.

Ok, so back to Gulp…

Gulp runs on the command line. It’s setup will depend on the website you’re building. For example it can be integrated into Wordpress websites, raw PHP framework websites such as Laravel or Codeigniter, or even into web apps, and these will all have different folder structures. This introduction to Gulp will be shown making for a simple web app with the following folder structure:

/app
   /css
   /sass
   /images
   /js
/dist

The assets such as css, sass and js files are all contained within your app folder as they normally would be, and included in the head of your website in