Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

94 lines (56 sloc) 2.789 kb

Using Grunt

Introduction

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins.

Bedrock provides a Gruntfile.js in the root of the project to make local development easier, by automating common tasks such as:

  • Compiling CSS when a LESS file changes.
  • Running JSHint when a JavaScript file changes.
  • Live reloading in the browser whenever an HTML, CSS of JavaScript file changes.

Installation

Grunt and Grunt plugins are installed and managed via npm, the Node package manager.

In order to get started, you'll want to install Grunt's command line interface (CLI) globally. You may need to use sudo (for OSX, *nix, BSD etc) or run your command shell as Administrator (for Windows) to do this:

npm install -g grunt-cli

You may also want to install JSHint globally using:

npm install -g jshint

Finally, install the dependencies that the bedrock Gruntfile needs:

npm install

Usage

To start the grunt task runner, simply run:

grunt

To enable live-reload in the browser you must set USE_GRUNT_LIVERELOAD to True in bedrock/settings/local.py:

USE_GRUNT_LIVERELOAD = True

In the root directory you will also find a .jshintrc-dist file which contains a basic set of defaults for running JSHint. If you wish to use these defaults with Grunt then copy the contents to a local .jshintrc file:

cp .jshintrc-dist .jshintrc

Testing

Bedrock has a suite of JavaScript unit tests written using Jasmine and Sinon. You can run these tests on the command line using Karma test runner and Firefox.

To perform a single run of the test suite, type the following command:

grunt test

Note

The Tabzilla tests require that you have your local bedrock development server running on port 8000.

Cleaning generated CSS files

Bedrock uses Less to generate CSS files. Sometimes during development you may want to clear out your cached CSS that gets generated. To make this easier, you can clear all *.less.css files located in media/css/ directories with the following command:

grunt clean
Jump to Line
Something went wrong with that request. Please try again.