Automating with Node

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

Navigate to the project folder and run the following command:

$ sudo npm install gulp -g

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:

$ npm init

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:

$ npm install gulp --save-dev
$ npm install gulp-sass --save-dev

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:

/app
   /css
   /sass
   /images
   /js
/dist
/node_modules
gulpfile.js
package.json

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:

var gulp = require('gulp'); //Requires Gulp from the node_modules folder
var sass = require('gulp-sass'); //Requires the Gulp Sass plugin
gulp.task('sass', function () { //Begin Gulp task, called "sass"
   return gulp.src('app/sass/*.scss') //Directory of sass files
   .pipe(sass().on('error', sass.logError)) //Run the compile feature
   .pipe(debug())
   .pipe(gulp.dest('dist/')) //Output the css file to this directory
});

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:

gulp sass

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!