Catherine Farman is a Developer at Happy Cog, where she builds standards-based websites using HTML, CSS and Javascript. Catherine has taught responsive web design, Javascript, and Sass courses for Girl Develop It. She lives in Philadelphia and when she’s not at a computer enjoys sewing, soccer, food, bikes and books.

Catherine's articles

  1. Automate Recurring Tasks with Grunt

    I’m a recent convert to using Grunt.js to run tasks that are an essential part of my development workflow. Grunt is a command-line tool that lets you run a heap of tasks in one command, all customized to your liking and tailored to your project’s needs. It helps me automate repetitive jobs like CSS preprocessing, or minifying code for a production environment.

    After moving to Grunt in a team environment at Happy Cog, it’s helped us solve new problems that we didn’t even foresee using it for, like image optimization, database syncing, and WordPress theme management. Read on to learn how to automate front-end Sass and JavaScript tasks with Grunt, and how to get your project using it in no time.

    Pick a Task

    Grunt’s community of developers mean there’s a plugin for most any task you’d like to perform and automate. Yet I’ve found that the easiest way to get started with Grunt is to pick one or two essential processes you want to automate, and get those running on your project. As a front end developer, my most crucial tasks are Sass compilation and JavaScript concatenation. This article assumes you have Sass 3.3 installed. To create a practice directory, download or clone my grunt-js-base project to your machine and check out index.html in the browser.

    As it happens, the Grunt.js plugin repository lists two officially maintained plugins that will serve these purposes: Uglify for JS minification (and more), and grunt-contrib-sass.

    Install Node.js and Grunt’s Command Line Interface

    Before we can install these plugins, we need Node.js on our computer. Luckily, it’s an easy install for Windows or Mac OS. Just go to nodejs.org and click the big green INSTALL button to download.

    Once you’ve installed Node.js, you need Grunt’s Command Line Interface tools on your computer. From a terminal window, run npm install -g grunt-cli. If you get a permissions error, I suggest reading this article on npm. This article, written by Isaac Schlueter, will teach you how to install modules without using sudo.

    Add package.json to Your Project

    You need two files for every project that uses Grunt – package.json and Gruntfile.js. Start by adding package.json to your project folder, in the root. You can use the basic contents from the Grunt.js setup instructions, substituting with your project’s info. With time you’ll evolve your own starter kit for projects. Here’s my default Grunt project‘s package.json:

    [js]
    {
    “name”: “grunt-js-base”,
    “version”: “0.1.0”,
    “devDependencies”: {
    “grunt”: “~0.4.2″,
    “grunt-contrib-uglify”: “~0.2.2″,
    “matchdep”: “*”
    },
    “repository”: {
    “type”: “git”,
    “url”: “git://github.com/cfarm/grunt-js-base.git”
    },
    “author”: “Catherine Farman”,
    “homepage”: “http://cfarman.com”
    }
    [/js]