Build

Process to compile, optimize, and minify your 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. To learn more about the command line check out this course.

Run #

Command line tasks for building your project

This command compiles and minifies all assets once.

wee run

Static Server

Running this will continuously compile your CSS and JavaScript changes, launch a local web server, serve static HTML from the public directory, and reload as necessary.

wee run:static

Local Server

When serving dynamic content, you’ll probably need to run something like Vagrant, MAMP (Mac), or EasyPHP (Windows). This task uses the wee.json settings and proxies to your local server. As with the “static” command, Wee continuously compiles changes and injects them into your browser.

wee run:local

Script Build #

Wee builds JavaScript in the following sequence

  1. The primary script compiles to public/assets/js/script.min.js from the following:
    1. Core features enabled in wee.json
    2. Vendor files from source/js/build/vendor
    3. Init script from source/js/init.js
    4. Remaining files from source/js/build
    5. Build files set in wee.json
    6. Core script from source/js/script.js
    7. Autoloaded modules from source/modules
      1. Vendor files from core/js/vendor
      2. Init script from core/js/init.js
      3. Remaining files from core/js
      4. Build files set in module.json
      5. Core script from core/js/script.js
      6. Custom module.json directives compile to public/assets/modules
  2. Scripts in source/js/lib minify into public/assets/js/lib
  3. Custom wee.json directives compile to public/assets/js
  4. Module script in modules/*/core/js/lib minify into public/assets/modules/*/js/lib

Style Build #

Wee builds CSS in the following sequence

  1. The primary stylesheet compiles to public/assets/css/screen.min.css from the following:
    1. Wee reset
    2. Core features enabled in wee.json
    3. Vendor files from source/css/build/vendor
    4. Remaining files from source/css/build
    5. Build files set in wee.json
    6. Core CSS from source/css/screen.less and source/css/breakpoints
    7. Autoloaded modules from source/modules
      1. Build files set in module.json
      2. Core style from core/css/screen.less and core/css/breakpoints
      3. Custom module.json directives compile to public/assets/modules
  2. Stylesheets in source/css/lib minify into public/assets/css/lib
  3. Custom wee.json directives compile to public/assets/css
  4. Module CSS in modules/*/core/css/lib minify into public/assets/modules/*/css/lib

Testing #

Easily drop in functional and unit tests using Intern

Intern is a comprehensive framework for testing web projects. By default in Wee it requires ChromeDriver be installed. To change that or customize anything about the Intern setup modify source/js/test/config.js.

Run the following command to kick off JavaScript tests for your project.

wee test

You can also access the Intern visual report at “/$root/node_modules/intern/client.html?config=source/js/tests/config&initialBaseUrl=/$root” in your browser.

Wee Core

Run the following command to execute the Wee Core tests.

wee test:core

Options

If your tests grow unwieldy, you can select a specific suite to run at a time.

wee test --suites=source/js/tests/unit/example.js

You can also define a separate environment for running your tests in a continuous integration service like TravisCI. To do this, create another intern config file js/tests/ci-config.js. This already exists for Wee Core. To execute tests with this config file, define the following env argument.

wee test --env=ci

Views #

If you’re using Wee’s data-binding, creating views in their own files can alleviate some problems and help keep things organized. Simply drop HTML files into your js/views/load directory and they’ll be made available to your script. If you prefer to load the views on-demand keep them in the js/views directory but outside the load sub-folder.

Internally the templates are made available to the apps and the render function using the addView method.