Creating a New Grunt Project

Grunt is a tool for automating front end workflow tasks. My first tasks are to automate CSS and JavaScript file minification. This post only logs the basic steps and useful resources.

Getting started

Grunt – Getting Started documentation from the grunt website is the obvious place to start.

Brian Chu’s Grunt by Example tutorial and Justin McCandless’s Tutorial for Getting Started on Grunt further expand and explain the steps involved.

Overview of Basic Steps

These are the basic steps involved. The other resources listed in this post detail the creation and installation of any required files.

  1. Install the Grunt CLI globally: so the grunt command exists within system path allowing it to be run from any directory.
  2. Prepare a new Grunt project:  add the following two files to the root of the project for which to run the automation tasks (detailed within any of the resources listed here):
    • package.json – list grunt and the Grunt plugins.
    • Gruntfile.js – configure or define tasks and load Grunt plugins.
  3. Install plugins for the project:
  4. Add plugins to package.json and Gruntfile.js (detailed within any of the resources listed here).
  5. Run Grunt:
    • Run grunt to run all the tasks for the project
    • or follow it with an individual task to run only that task e.g grunt uglify

Further Reading

One comment on “Creating a New Grunt Project

  1. Glenn McComb says:

    Chris Coyier wrote a great article for 24 ways which I found very helpful.

    http://24ways.org/2013/grunt-is-not-weird-and-hard/

Leave a Reply

Your email address will not be published.