Issue title: Extending js and css helpers
 Issue body: We've been considering ways to make it easy to include script and stylesheet resources from pages and partials/components, but make sure those resources are injected into the html in the correct place (usually being a layout).

I'm opening this issue to get some ideas on how it would look in handlebars syntax so I can try to get it working as a helper.

`data.yml`:

``` yml
listOfCssOrLessFiles:
 - file1.css
 - file2.css
 - file3.css

listOfJavaScriptFiles:
 - file1.js
 - file2.js
 - file3.js

additionalCssFiles:
 - addtionalFile1.css

additionalJsFiles:
 - additionalFile1.js
```

`Layout.hbs`:

``` handlebars
<html>
  <head>
    {{css listOfCssOrLessFiles}}
  </head>
  <body>
    {{> body}}
    {{js listOfJavaScriptFiles}}
  </body>
</html>
```

`Page1.hbs`:

``` handlebars
<h1>Awesome Component Example</h1>
<div id="myComponent"></div>
{{css additionalCssFiles}}
{{js additionalJsFiles}}
```

This would allow only loading the files that are needed for the current page being built. The results would be like this...
`Page1.html`

``` html
<html>
  <head>
    <link rel="stylesheet" href="assets/styles/file1.css">
    <link rel="stylesheet" href="assets/styles/file2.css">
    <link rel="stylesheet" href="assets/styles/file3.css">
    <link rel="stylesheet" href="assets/styles/additionalFile1.css">
  </head>
  <body>
    <h1>Awesome Component Example</h1>
    <div id="myComponent"></div>
    <script src="assets/js/file1.js"></script>
    <script src="assets/js/file2.js"></script>
    <script src="assets/js/file3.js"></script>
    <script src="assets/js/additionalFile1.js"></script>
  </body>
</html>
```

Please post ideas or a better syntax for these helpers. Thanks.

 Comments: 
 Comment 0: Original inspiration for what I do came from my past use with [Hammer for Mac](http://hammerformac.com). They have a feature call "Clever Paths --  Write asset paths the easy way. Hammer searches your project for the file and writes the filepath for you, even if it moves." I was able to replicate what they do using [grunt-tree](https://github.com/yss/grunt-tree) to create json files of assets in my project. This allows me to call up a file name without having to manage its location.

I run grunt-tree whenever I add, delete or change a file so there is always a fresh copy of my directory structure. It is quick so no drag when grunt-contrib-watch is running:

```
Running "tree:partials" (tree) task
File "app/assemble/config/manifests/inc.json" created.
Task 'tree:partials' took 17ms

Running "tree:img" (tree) task
File "app/assemble/config/manifests/img.json" created.
Task 'tree:img' took 20ms

Running "tree:css" (tree) task
File "app/assemble/config/manifests/css.json" created.
Task 'tree:css' took 16ms

Running "tree:js" (tree) task
File "app/assemble/config/manifests/js.json" created.
Task 'tree:js' took 11ms
```

I have not tried this method with collections nor arrays as grunt-tree makes an individual entry per file. Sometime tonight I will try that out and replicate your example setup. It never dawned on me to do it that way.
css.json

``` js
{
    "animate": "css/development/dev/animate.css",
    "jquery-tocify": "css/development/dev/jquery-tocify.css",
    "lean-slider": "css/development/dev/lean-slider.css",
    "parallax-slider": "css/development/dev/parallax-slider.css",
    "progressbars": "css/development/dev/progressbars.css",
    "splash": "css/development/pages/splash.css",
    "stickyfooter": "css/development/pages/stickyfooter.css",
    "prettify": "css/development/prettify.css",
    "mapbox": "css/mapbox.css",
    "styles-min": "css/styles-min.css",
    "styles": "css/styles.css",
    "kess14test": "css/views/kess14test.css",
    "splash-min": "css/views/splash-min.css",
    "stickyfooter-min": "css/views/stickyfooter-min.css"
}
```

_head.hbs (partial for layout)

``` html
...
<!-- CSS Base -->
{{#is buildenv "development"}}
  {{css css.styles}}
{{else}}
  {{css css.styles-min}}
{{/is}}
...
```

js.json

``` js
    ...
    "affix": "js/jquery/bootstrap/affix.js",
    "alert": "js/jquery/bootstrap/alert.js",
    "button": "js/jquery/bootstrap/button.js",
    "carousel": "js/jquery/bootstrap/carousel.js",
    "collapse": "js/jquery/bootstrap/collapse.js",
    "dropdown": "js/jquery/bootstrap/dropdown.js",
    "modal": "js/jquery/bootstrap/modal.js",
    "popover": "js/jquery/bootstrap/popover.js",
    "scrollspy": "js/jquery/bootstrap/scrollspy.js",
    "tab": "js/jquery/bootstrap/tab.js",
    "tooltip": "js/jquery/bootstrap/tooltip.js",
    "transition": "js/jquery/bootstrap/transition.js",
    ...
```

foot.hbs (partial for layout)

```
{{#is buildenv "development"}}
    {{js js.transition}}
    {{js js.alert}}
    {{js js.button}}
    {{js js.carousel}}
    {{js js.collapse}}
    {{js js.dropdown}}
    {{js js.modal}}
    {{js js.tooltip}}
    {{js js.popover}}
    {{js js.scrollspy}}
    {{js js.tab}}
    {{js js.affix}}
  {{else}}
    {{js js.bootstrap-min}}
  {{/is}}
```

img.json

``` js
    "billboard": "img/frames/billboard.png",
    "billboard2": "img/frames/billboard2.png",
    "desktop": "img/frames/desktop.png",
    "iphone": "img/frames/iphone.png",
    "tablet": "img/frames/tablet.png",
    "cloud": "img/icons/cloud.png",
    "content": "img/icons/content.png",
```

dummy.html

``` html
<div class="float-left">
    <img class="img-responsive" src="{{assets}}/{{img.iphone}}" alt="">
</div>
```

result...

``` html
<html>
  <head>
    <!-- CSS Base -->
    <link rel="stylesheet" href="../assets/css/styles.css" />
    <link rel="stylesheet" href="../assets/css/development/prettify.css" />
  </head>
  <body>
       ...
       <div class="float-left">
            <img class="img-responsive" src="../assets/img/frames/iphone.png" alt="">
        </div>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
       ...
   <script src="../assets/js/jquery/bootstrap/transition.js"></script>
    <script src="../assets/js/jquery/bootstrap/alert.js"></script>
    <script src="../assets/js/jquery/bootstrap/button.js"></script>
    <script src="../assets/js/jquery/bootstrap/carousel.js"></script>
    <script src="../assets/js/jquery/bootstrap/collapse.js"></script>
    <script src="../assets/js/jquery/bootstrap/dropdown.js"></script>
    <script src="../assets/js/jquery/bootstrap/modal.js"></script>
    <script src="../assets/js/jquery/bootstrap/tooltip.js"></script>
    <script src="../assets/js/jquery/bootstrap/popover.js"></script>
    <script src="../assets/js/jquery/bootstrap/scrollspy.js"></script>
    <script src="../assets/js/jquery/bootstrap/tab.js"></script>
    <script src="../assets/js/jquery/bootstrap/affix.js"></script>
  </body>
</html>
```

I am using custom versions of the `{{css}}/{{js}}` helpers to achieve the same effect as the present ones.

 Comment 1: Should be concatenating these files, I don't think this is a great way of handling things. Every item is a HTTP Request.
 Comment 2: Closing due to age.

The helpers are still here and they can take a string or array of strings to build the html, but I think the data should be transformed before render time and passed into the helper in the correct format. This will let something else handle doing concatenation (as @custa1200 pointed out) when it's needed.

This can be done in the assemble build process by a `preRender` middleware and combine the global files with the page specific files (specified in front-matter) and can combine those and update the page front-matter with the newly combined file.

{'source': 'GithubIssues', 'repo_name_with_owner': 'helpers/handlebars-helpers', 'issue_id': 23813717, 'repo_stars': 2093.0}