Venditan, The E-Commerce & Retail Experts
We're Recruiting, PHP Specialists, Enquire Here

Automating Development Tasks with Grunt - The Basics

Come in and take a look inside the venditan hq!

We're recruiting php people, interested?

Show Me More

Automating Development Tasks with Grunt - The Basics

Posted 09/01/2014 by Martin Downton

What is Grunt?


Good question. Grunt is a Task Runner. You set it up to perform certain tasks, issue one command and it does them for you, saving you time and effort later on. There is of course an upfront cost in terms of time to get Grunt configured, but my hope is that this article will make that as easy as possible so that you can get your Grunt "Tasks" built as quickly as possible, automate as much of your workflow as you can and get back to doing what you do best: actually writing code.

 

Dependencies


Grunt is written in JavaScript and runs on top of NodeJS, so you will need that installed on your local system, as well as NPM (Node Package Manager) to install grunt plugins. It's not really a dependency as such but you need to have the Grunt CLI installed which issues commands to your project's local Grunt installation, and finally any tasks that you want to perform that require other components will need installing, so for example if you want to automate your SASS compilation you will need Ruby, Gems and SASS.

Here are the commands you will need to install these dependencies on CentOS:

# Install NodeJS and NPM
$ sudo yum install npm
# Install Grunt CLI, the -g flag installs this globally so that you can use it on more than one project
$ npm install -g grunt-cli

If you are not on CentOS, check out NodeJS.org's article on how to install NodeJS and NPM, but after you have that installed all of the steps are the same. If you are on Windows I highly recommend either installing Chocolatey, Scoop or switching to a better OS. I'll refer you to the SASS Installation guide for getting that installed.

A quick note on workflow, if you're worried about cluttering servers with these dependencies, the standard practice is to have Grunt running on your local system, or perhaps your CI server if you have one, and run tasks from there before deploying or committing to version control.

 

Creating your Project


There are two files you need to create to get Grunt running in your project, Gruntfile.js and package.json. The package.json is an overview of your project and contains general information such as a title, description and location of your version control repository. To generate this file you can run:

$ npm init

This will ask you questions about your project which you can answer or leave blank but it will give you the skeleton file. Next we need to get Grunt itseld installed and install some plugins to automate tasks. To install Grunt and the SASS plugin run these commands:

$ npm install grunt --save-dev
$ npm install grunt-contrib-sass --save-dev

Two things to note, anything with contrib in the name has been authored and approved by the makers of Grunt and is most likely stable and reliable. Also the --save-dev flag will tell your package.json file that this plugin is a project dependency; if you look at your package.json file now it will have a section called "devDependencies" with this plugin listed. You can find more plugins from the Grunt Plugin Directory.

When you install Grunt plugins, they will follow the NPM standard and install in your project in a folder called "node_modules". You may want to exclude this from version control by adding a line to your ".gitignore" file or running "svn propedit svn:ignore ." and adding an entry there.

Now we can create our Gruntfile.js file. Here is a basic example that will compile your SASS files to CSS:

module.exports = function (grunt) {
   grunt.initConfig({
      pkg:grunt.file.read('package.json'),

      sass: {
         my_sass_task: {
            options: {
               style: 'expanded'
            },
            files: {
               '/css/my.css' : '/sass/my.scss'
            }
         }
      }
   });
   
   grunt.loadNpmTasks('grunt-contrib-sass');
   grunt.registerTask('default',['sass']);
}

The first three lines here are essentially bootstrap but they tell Grunt that this is your configuration and to read from your package.json file. The "sass" section is fairly self explanatory, we're passing an option of "style: 'expanded'" so that our CSS is readable afterwards and we're compiling to "/css/my.css" from "/sass/my.scss" (note this is the correct way around). The "loadNpmTasks" line references our SASS plugin and the "registerTask" line specifies "sass" as a default task. You can add or leave out tasks from the default task as you install them, perhaps you wish to compile and minify code every time but not compress image assets.

 

Running Grunt


$ grunt

It's as simple as that! This will run whatever tasks are in you "default" configuration in your Gruntfile.js file. You can pass individual tasks to Grunt to run them individually:

$ grunt sass

 

Grunt for teams


Grunt is great if you work as part of a team. Once you have created your Gruntfile.js and package.json files you can commit them to version control and they are there for the rest of your team to use and add to. Once they've pulled those down to their codebase run the following command:

$ npm install

This will read the dependency list from the package.json file and install everything needed (this is why you pass the --save-dev flag when you install new plugins). And that's it!

 

What's Next?


I hope this has been useful, I will try and follow up with another post detailing some other tasks that can be automated, but in the mean time have a look at grunt-contrib-watch which will run as a process and execute tasks when files are changed. This also includes a livereload implementation which will even refresh your browser once the tasks have been completed.

Back To Posts