Asset Conventions

Stylesheets and scripts are injected automatically while building, and only get optimized in --production mode. Working with development libraries instead of minified and production-ready code not only enables you to read through the code, but it also makes it easier to debug possible errors.


View-specific assets

This method is great for shrinking per-page asset size on larger projects. If you want to include a script or a stylesheet exclusively on a certain page, you can use the "view-" prefix. Just make sure the file name starts with "view-", followed by the name of the page you want it on—eg. view-index.scss or view-profile-some.library.js—and you're good to go.


Excluding files

Not the most useful feature development-wise, but you can exclude files by prefixing their name with an underscore, eg. _jquery-1.11.0.js. This comes in handy when you want to commit a file that isn't quite ready yet, to a repository that you are working on with someone else. This way you can be sure it won't get in the way when the other persons builds the project on his machine. It also enables you to easily switch libraries in or out without the need to quit and restart the Headstart process.


Script dependencies

Scripts are automatically ordered alphabetically, and based on their location in the "assets/js" folder:

  1. The library, i.e. any "ender*" or "jquery*" prefixed file from the assets/js/libs folder.
  2. All files of assets/js/libs/dev (only when not building --production).
  3. All the other files of assets/js/libs.
  4. All the files of assets/js/core (if present).
  5. All the remaining scripts, including assets/js/main.js.
  6. The view-specific scripts (if provided).

By prepending a simple comment inside of your files, it is possible to define specific dependencies within this order. Say you are working with libA.js which needs libZ.js to work correcly. To make sure libZ.js is injected first, prepend the following to libA.js:

// requires: libZ.js

/* 
Other code from libA here ...
*/

Next step: Sass Setup