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:
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
Navigate to the project folder and run the following command:
This will install gulp globally on your machine, signified by the use of the -g in the command.
Once this has completed, run the following command:
This will then ask you to fill out details about your project such as the name and version. Once you complete this, you’ll see a new file will be created called package.json. This holds all the information about your project, including a list dependencies (such as Gulp) which we’ll cover now.
Next step - run the following commands:
This installs gulp and the sass compiler packages locally, as we are omitting the -g from the command we entered before. The –save-dev option tells node to add the package reference in the package.json file so we can easily manage the projects extra libraries. These extra libraries (or node modules/packages) are all stored in the automatically created folder called node_modules which will have just appeared in your folder structure. The last step is to manually create the main file when using gulp which is gulpfile.js.
Your structure should now look like this:
Now lets make a really simple gulp task to show the basics. We’ll start by compiling the sass into css. Add the following to the gulpfile.js:
As you can see here, we’re creating a task called sass. Gulps advantage over other task runners is its ease in syntax. Most tasks take a source file, process the file, and output a new file. These are joined together with .pipe() functions.
To run the task, simple enter the following into your terminal:
Where “sass” here is referencing the name of the task. And there you have it! The compiled css file should appear in the /dist folder.
This is one of the most simple tasks which can be made for Gulp. It can do many other great things to greatly improve the development process of a project and same so much time and effort. I’ll write another post soon covering some other similar development topics, so get in touch if you want to know more!