Today is the day to Grunt

grunt-logoWeb development has become much more complex these days.

By “complex”, I mean there are SO many tools to do neat stuff with your web related files.  The focus of User Experience in the past few years has create an explosion in streamlining web development. Anyways, I love to play with cool tools, I am not complaining.

At work I lead a UI project where we re-brand open source web utils (like Bootstrap, jQueryUI, etc) for other developers to use. We’ve been focusing on delivering end-user features all along and did not spend too much time looking into automating some of the process, like packaging files for distribution in our CDN. (yes I made a global CDN too… well I mean national.)

Today is the day!

Ok let’s start with something small. My goal is to combine a couple css files and minify the result.
I will try out Grunt because I’ve seen it too many times on open source projects on GitHub.

Ingredients

  • Installations
    • NodeJS
    • Grunt
      • grunt-cli
      • grunt-contrib-concat
      • grunt-css
  • Creations
    • package.json
    • Gruntfile

Instructions

  1. Get NodeJS – installer available at nodejs.org
    Verify your installation with npm -v on your command line
  2. Install Grunt
    > npm -g install grunt-cli-g will install grunt-cli globally (ie sharable across your computer, not just in your project)
    Verify your install with grunt -v on your command line
  3. Create package.json
    “package.json: This file is used by npm to store metadata for projects published as npm modules. You will list grunt and the Grunt plugins your project needs as devDependencies in this file.” — straight from Grunt’s documentation. In other words, this file is used to describe your project in a way that npm understands it.Make a new file called “package.json” at the root of your project.Here’s the boilerplate you can modify
    {
       "name": "my-project-name",
       "version": "0.1.0"
    }
    We will fill in the dependencies later.
  4. Adding dependencies to package.json
    the reason we don’t include the dependencies when you create the package.json in the above step, is that it can be done automatically with npm. (Why create when you can generate?)run these on your command line at the root of your project
    > npm install grunt-contrib-concat --save-dev
    > npm install grunt-css --save-dev

    You will have installed the two modules we will be using to concatenate the files and minifying. They are installed right in the root of your project, under a /node_modules folder. Global installation of these is not possible at the moment and there’s a constant inquiry, but still not available. So just add the folder to .gitignore for now to avoid checking those files it.the –save-dev option will put those as a devDependencies in your package.json. Your package.json should look like this now{
       "name": "my-project-name",
       "version": "0.1.0",
    "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-css": "~0.5.4",
    "grunt-contrib-concat": "~0.5.1"
    }

    }
  5. Tell Grunt what to do
    create a Gruntfile.js at the root of your project. Here’s more boilerplate code:
    module.exports = function(grunt) {
    // Project configuration.
    grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'), // combine files
    concat: {
    css: {
    src: ['css/first.css', 'css/second.css'], // if order is not important, you can use 'css/*.css' to get all css files
    dest: 'dist/css/mycombined.css' // putting them into a /dist folder
    }
    },
    // minify
    cssmin: {
    css: {
    src: 'dist/css/mycombined.css', // from the just combined file
    dest: 'dist/css/mycombined.min.css' // to a minified file
    }
    }
    });
    // Load the plugin that provides the "concat" and "cssmin" tasks
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-css');
    grunt.registerTask(‘default’, [‘concat’, ‘cssmin’]);   // this is the default task for grunt to run if you do not provide any arguments. (ie. just “grunt”)
    }
  6. Run it
    Type “grunt” at the project root on your command line, and PROFIT!
    > grunt
    The combined and minified files should now be created in the /dist folder

Grunt docs

Tested with npm 1.3.2, grunt-cli v0.1.13,
“devDependencies”: {
“grunt”: “~0.4.5”,
“grunt-css”: “~0.5.4”,
“grunt-contrib-concat”: “~0.5.1”
} on Windows 7

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s