hut-build

hut-build

HTML UI Toolkit build tool.

This tool is custom-made for the HTML UI Toolkit (hut) packages. It is not intended to be a general-purpose build utility.

Lint

Run hut-build lint in your project directory to lint all the source files using JSHint. See the jshint.json file for the JSHint settings.

Test

Write tests in the test.js file in your project directory. Tests must output TAP-compatible output to the console. Run the tests using hut-build test. This lints the source files and runs the tests on all supported browsers (see the browser.json file).

Tests are run on Sauce Labs browsers. The SAUCE_USER and SAUCE_KEY environment variables must be set to your Sauce Labs username and key, respectively. When running under Travis CI or Drone.io, the build number is automatically sent to Sauce Labs to update the status images.

See Serve Locally for directions on serving the test files locally.

Build

When writing an HTML/CSS/JS module, you can use the hut-build build command. Write an example using your module in the example directory inside of your project directory. Include an index.html file for the HTML page. You can also include an example.js file that will be bundled with Browserify and an example.css that will be processed with Rework. Reference the example.js and example.css files from index.html file when using them.

When running hut-build build, the processed files (index.html, example.js, and example.css) will be written to the build folder.

Serve Locally

When developing, it is a pain to always run hut-build build. To serve the files locally, run hut-build serve. This will serve the processed example files at http://localhost:8000/example/. Specify the port to use with the --port argument and enable source maps for JS with the --debug flag.

This also serves the JS tests. Run the tests at http://localhost:8000/test/. The console output will be shown on the page.

Project Structure

The project structure expected by hut-build:

my-project
 - example         # A directory containing an example using the project
   - index.html    # Example HTML file
   - example.js    # Example JS file
   - example.css   # Example CSS file
   - build         # A directory containing the built files
 - build
     - index.html  # Copied from example/index.html
     - example.css # Processed by rework
     - example.js  # Processed by browserify
 - test.js         # The JS test file, must use TAP output to console
 - package.json    # The package.json file needed for NPM

The test.js and example/example.js files will be processed by Browserify. The example/example.css file will be processed by Rework, using rework-vars and rework-npm.