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.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}/build/css/
- wmnds-website.css
  - For styleguide specific styling
- wmn.css
  - For any styling related to WMN 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}/build/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}/build/js/
- wmnds-website.min.js
  - Created from any javascript files found in {root}/src/wmnds-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
- wmn.min.js
  - Created from any javascript files found in ['src/assets/js/wmn.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}/build/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}/build/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)