Build

Grunt process to compile, optimize, and minify your project

There are just a couple of tools you’ll need to compile a Wee project. We need to make a couple of assumptions about your knowledge of the command line. For instance, we’ll assume you know how to cd and run basic commands.

Setup

  1. Install the latest Node.js.
  2. Install the Grunt CLI (Command Line Interface) using the NPM (node package manager).
  3. Navigate to your project in the command line and execute npm install to install the Wee dependencies.

Tasks

Default

Simply run grunt from the command line to build your project once. This compiles and minifies all assets.

grunt

Static Server

Running grunt static will continuously compile your CSS and JavaScript changes on the fly, launch a local web server, serve the static HTML files in the specified project root, and reload as necessary.

grunt static

Local Server

For more advanced needs, you will probably need to run your own local server to serve PHP and/or MySQL with something like MAMP (OS X) or EasyPHP (Windows). In that case you would use the grunt local command. This uses the proxy settings you have specified in the project.json file and proxy to your local web server. As with the “static” command, grunt will continuously watch and compile your changes as you make them and reload your browser as necessary.

grunt local

Validate

Validate the current projects JavaScript source against defined standards. Read more about validation.

grunt validate

Generate

This task will generate the static site on demand. Read more about static generation.

grunt generate

Update

The update task will notify you if there is a newer version of Wee available.

grunt update

Script Build

  1. script.min.js - this is the primary script file. It is compiled from the following:
    1. Core scripts (as enabled in the project file)
    2. Vendor build directory files
    3. Remaining build directory files
    4. Project.config build files
    5. Custom/script.js
  2. Lib scripts minified in place
  3. Custom directives compiled

Style Build

  1. style.min.css - this is the primary CSS file. The following items are compiled:
    1. Reset
    2. Core components (as enabled in the project file)
    3. Vendor build directory files
    4. Remaining build directory files
    5. Project.config build files
    6. Custom/screen.less and breakpoints
  2. Custom directives compiled
  3. Lib scripts minified in place

FAQ

What is Grunt?

Grunt is an automated build tool. Wee uses Grunt to watch and compile your project as you go.

What is Node?

Grunt is built on Node.js, which is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

Note

As noted in the Installation section, Node must be installed to run the Grunt compiler.