·

photo credit: minds-eye via photopin cc

A Basic Grunt setup for building

Today I want to share a basic Grunt setup with you. I’m currently in the stage of my project where I have to setup the build instructions for Grunt.

Jenkins is our buildserver

jenkins
The workflow we use at my job is as follows:

  • The project is pushed to Git.
  • This triggers Jenkins to pull the latest version.
  • Jenkins checks out the build-branch and synchronises it with the master (hard reset).
  • It runs a grunt build -task.
  • It pushes the changes to to the build-branch.
  • Capistrano is going to deploy the build-branch.

On major thing you have to keep in mind here, is that with this setup, Git needs to have the source code as well as the concatenated and minified scripts in it’s repository (otherwise Capistrano wouldn’t have these files, since Capistrano also uses Git as a bucket-of-code).

The Grunt modules

grunt-logo
In my setup I use the following Node / Grunt-modules:

For the copy/pasters under us (and for myself, since I use my own site as a reminder for so many things):

Gruntfile.js

I have the following content in my Gruntfile.js . I’ve used comments in the code to explain what’s going on:

Template files

As you might have noticed, I’m using the processhtml -task to find and replace some lines in some of my template files. I’ll highlight the parts in these files:

header.php

This piece of HTML gets replaced with:

footer.php

This piece of HTML gets replaced with:

That’s it!

After Jenkins did this build for me, it commits and pushes it’s changes and it’s up to Capistrano to take care of the deployment. One thing that might be taken in consideration here is the fact that our build still has some source-files that aren’t needed for the live site. Think about the original SASS and the original JavaScript files for example. Although you could add the deletion of those to the clean -task, it might be a safer bet to delete these files in a post-deployment hook with Capistrano. This way you don’t accidentally delete source files from your project when testing your build-script locally.

Disclaimer:

I have to admit that I’m relatively new to Grunt, so this whole article might not be the best way to set things up. However, if you think there might be betters ways to achieve the above, please feel free to share it in the comments.

Visitors give this article an average rating of 2.3 out of 5.

How would you rate this article?

2 thoughts on “A Basic Grunt setup for building”

  1. danielvdspuy says:

    Maybe you wrote the commands out in longhand on purpose but it’s easier to install everything in one command:
    npm install grunt-contrib-clean grunt-contrib-concat grunt-contrib-cssmin grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-processhtml load-grunt-tasks

  2. danielvdspuy says:

    (incl. –save-dev after install or at the end)

Leave a Reply