Split up your files
Outsource 3rd party dependencies
Including 3rd party code to the core files of your project doesn't just blow up your project repository, it is also hard to get an overview of which files are the ones that belong to the project core, an which ones are coming from others. Since we use Bower for frontend dependency management, we keep 3rd party code outside the actual project scope and inject it using the power of concatenation and our build script.
Use the power of concatenation
A include of vendor files in your
vendor.js could look something like this:
//= include ../../../../bower_components/jquery/dist/jquery.js
Your folder structure
Following these simple rules your source folder structure could look like this:
In comparison this is how your distribution folder structure will look like.
js |-- plugins.min.js |-- scripts.min.js |-- vendor.min.js `-- modernizr.min.js // Modernizr need to be included at the top of your HTML. Therefore it is excluded form vendor.js
Sometimes you need scripts to be included at the top of your HTML. To do so, it is no shame to exclude this particular script form concatenation and put it to the distribution folder by hand