Folder Structure

The contents under assets/build/ are automatically generated, so you should never be editing anything in there directly.

Write your CSS in assets/sass/ and your javascript in assets/js/.

Grunt

We use Grunt to compile our SASS, minify our files, and lint our javascript. This keeps our code clean, readable, and easy to maintain. These instructions will help you get set up in Visual Studio 2012.

Do once per computer

  1. Install Node.js 4.2.2.msi

  2. Run Command Prompt as Administrator and install the Grunt CLI with npm install -g grunt-cli

Do once per project

  1. In Command Prompt (does not have to be Administrator), navigate cd to your project root where the Gruntfile.js is located.
    • Example: cd Documents\Visual Studio 2012\Projects\OTA\OTA.Website
    • Alternatively, navigate to the correct folder in File Explorer and enter cmd in the Address Bar.
  2. Install the project dependencies with npm install. This should add a local node_modules folder to your project. Do not commit this folder.

Do every time

  1. When you make a change to a .scss or to-be-bundled .js, run one of these tasks:
Task Example Notes
grunt grunt Compiles core.min.css, standard.min.css, standard-mobile.min.css
grunt js grunt js See Gruntfile.js for the list of files included in asap.minjs, app.min.js, and ptw.min.js
grunt do:[FILE] grunt do:pages Compiles [FILE] once (no _partials)
grunt spy:[FILE] grunt spy:pages Compiles [FILE] and watches for new changes
grunt ptw:[FILE] grunt ptw:ptwlandings Same as do:[FILE], but puts landing page stylesheets into the subfolder /ptw
grunt ptwspy:[FILE] grunt ptwspy:ptwlandings Same as spy:[FILE], but puts landing page stylesheets into the subfolder /ptw