Automating web development process with Node and Gulp
May 19, 2016
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?
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