Headstart can be instructed to do a couple of things. To get an overview printed out in your command line, just run
hs, or just continue reading.
To make a regular build, ie. compiling Sass, injecting assets into the HTML files, etc., run the following command:
This is great if you wanted to make the task runner build just once, but if you are developing and you want to build continuously with browser auto-refreshing enabled, you can run:
headstart build --serve
This will serve your development files on a static server and print out both a local and a network URL for you that you can copy-paste into your browser. Also, no more refreshing! It's all taken care of for you. Open the printed network url on multiple devices and try scrolling and clicking. All the connected clients are effortlessly synced, and all your changes will be applied automatically.
Taking it one step further, you could also have Headstart automatically open up a browser and a code editor for you:
headstart build --serve --open --edit
The shorthand version of the instruction above would look like this:
hs build --s --o --e
The browser and editor, and much more, can be configured from your project config file.
When you're done developing, it's time to introduce your project to the public. This is usually when you would start optimizing (eg. concatenating, minifying, revisioning, etc.). Headstart will do all of those things for you, requiring only the use of the production flag:.
headstart build --production
Using that flag makes the build engine do the following things (taking the configuration file into account):
- Optimize image and SVG files.
- Make a
.icoversion of the
favicon.pngfrom the icons folder, and put it in the root directory.
htaccess.txtinto a working
- Copy the other items from the
miscfolder to the root directory.
console.log()and other development code.
- Minify CSS.
- Minify template HTML.
Tip: The production build can also be used with the
Configuring your build
config.json file that comes with the boilerplate enables you to customize the building engine on a per-project basis. Here is a commented version of that file (don't put comments in your own config file though).
Some extra options that aren't included in the configuration file by default: