building.md

1. Building

Build commands are used for when code is to be compiled to an output that is suitable for a particular environment.

1.1. Table of contents

• 1. Building
  • 1.1. Table of contents
  • 1.2. Styles (Sass)
    • 1.2.1. Command
    • 1.2.2. What it does
  • 1.3. Templates (HTML)
    • 1.3.1. Command
    • 1.3.2. What it does
  • 1.4. Scripts (Javascript)
    • 1.4.1. Command
    • 1.4.2. What it does
  • 1.5. Images
    • 1.5.1. Command
    • 1.5.2. What it does
  • 1.6. Sprites
    • 1.6.1. Command
  • 1.7. Config
    • 1.7.1. Command
    • 1.7.2. What it does
  • 1.8. Build all
    • 1.8.1. Command
    • 1.8.2. What it does

1.2. Styles (Sass)

1.2.1. Command

npm run build:styles

1.2.2. What it does

• Compiles sass
• Uses autoprefixer to parse CSS and add vendor prefixes
• Minifies CSS
• Creates two files in {root}/doc/css/
  • wmcads-website.min.css
    • For styleguide specific styling
  • wmcads-components.min.css
    • For any styling related to WMRE components
• Creates sourcemaps in {route}/_sourcemaps/

1.3. Templates (HTML)

1.3.1. Command

npm run build:templates

1.3.2. What it does

• Lint templates
• Compile all handlebar file includes using gulp handlebars file include
• Outputs compiled files to {route}/doc/views/

1.4. Scripts (Javascript)

1.4.1. Command

npm run build:scripts

1.4.2. What it does

• Lints scripts
• Compiles javascript files with babel
• Concatenates all smaller javascript files together into one file
• Mangles and minifies the file
• Creates three files in {root}/doc/js/
  • wmcads-website.min.js
    • Created from any javascript files found in {root}/src/wmcads-website/**/*.js
    • For styleguide specific items only
  • vendor.min.js
    • Created from any javascript files found in {root}/src/assets/js/vendor/**/*.js
    • For any vendor/third-party scripts that are required for components
  • WMRE.min.js
    • Created from any javascript files found in ['src/assets/js/WMRE.js', 'src/components/**/*.js']
    • For any custom javascript associated with a component
• Creates sourcemaps in {route}/_sourcemaps/

1.5. Images

1.5.1. Command

npm run build:images

1.5.2. What it does

• Minifies all images located in {root}/src/assets/img/**/*
• Outputs the minified images to {root}/doc/img/ with the exact same file name

1.6. Sprites

1.6.1. Command

npm run build:sprites

1.7. Config

1.7.1. Command

npm run build:config

1.7.2. What it does

• Moves {root}/src/assets/config/**/* to {root}/doc/config

1.8. Build all

1.8.1. Command

npm run build:all

1.8.2. What it does

• npm run clean (cleans the directory)
• npm run build:styles (build styles)
• npm run build:templates (build templates)
• npm run build:scripts (build scripts)
• npm run build:images (minifies images)
• npm run build:sprites (build sprite sheets)
• npm run build:config (build config)
• npm run lint:styles (lint styles)
• npm run lint:templates (lint templates)
• npm run lint:scripts (lint scripts)