Step 3 - Automated Build Tools - SASS and Grunt

The Grunt utility will allow us to quickly compile SASS, JavaScript automatically through a single command. It’s required to get SASS files and Pattern Lab patterns to appear in the browser.


Installing Grunt and Node the First Time

  1. Install Node.js for your OS https://nodejs.org/en/download/
  2. Open the command line interface (called Terminal on the Mac)
  3. Type “sudo gem install sass” and enter
  4. Type “sudo npm install -g grunt-cli” and enter
  5. Navigate to the directory where your project is located. If your project is located in the Documents folder on your computer, you would type: “cd Documents/PROJECTNAME/httpdocs” and enter.
  6. Type “sudo npm install” and enter
  7. Type “grunt” and hit enter.

Starting Up Grunt Again

If you’ve exited the Terminal app, you’ll need to do the following first:

  1. Open the command line interface (called Terminal on the Mac)
  2. Navigate to the directory where your project is located. If your project is located in the Documents folder on your computer, you would type: “cd Documents/PROJECTNAME/httpdocs” and enter.
  3. Type “grunt” and hit enter.

Grunt will stay running as long as you keep the terminal window open.

To end Grunt, use Control (not command) + C.

Return to Class