How to explicitly include Foundation 5 child scripts in Bower/Grunt?

168 views Asked by At

Fairly new to the front-end build system and I am tooling around in a Yeoman generated angular rigged site. It uses Gruntfile.js to include bower.json which declares the following - note that I added Foundation and it's dependencies:

{
  "name": "mercurysocialclub",
  "version": "0.0.0",
  "dependencies": {
    "angular": "^1.3.0",
    "angular-animate": "^1.3.0",
    "angular-cookies": "^1.3.0",
    "angular-resource": "^1.3.0",
    "angular-route": "^1.3.0",
    "angular-sanitize": "^1.3.0",
    "angular-touch": "^1.3.0",
    "foundation": "^5.5.0",
    "fastclick": "^1.0.6",
    "modernizr": "^2.8.3"
  },
  "devDependencies": {
    "angular-mocks": "^1.3.0"
  },
  "appPath": "app",
  "moduleName": "mercurysocialclubApp"
}

It all checks out. After running grunt --force from terminal the build generates the following script calls in the /app/index.html, and exports /dist/vendor.js with all calls concatinated:

Configuration is now:

  concat:
  { generated:
   { files:
      [ { dest: '.tmp/concat/scripts/vendor.js',
          src:
         [ 'bower_components/modernizr/modernizr.js',
         'bower_components/jquery/dist/jquery.js',
         'bower_components/angular/angular.js',
         'bower_components/angular-animate/angular-animate.js',
         'bower_components/angular-cookies/angular-cookies.js',
         'bower_components/angular-resource/angular-resource.js',
         'bower_components/angular-route/angular-route.js',
         'bower_components/angular-sanitize/angular-sanitize.js',
         'bower_components/angular-touch/angular-touch.js',
         'bower_components/fastclick/lib/fastclick.js',
         'bower_components/jquery.cookie/jquery.cookie.js',
         'bower_components/jquery-placeholder/jquery.placeholder.js',
         'bower_components/foundation/js/foundation.js' ] },
    { dest: '.tmp/concat/scripts/scripts.js',

However, the Foundation orbit script doesn't appear to be included. What I cannot figure out is how to explicitly include a Foundation dependency script with bower.json or Gruntfile.js.

This solution did not appear to include write correctly: http://foundation.zurb.com/forum/posts/21949-compiling-javascript-in-the-gruntfile

And anywhere else I try to include the either gets overwritten OR cannot access the bower_components directory outside of grunt configs.

Any idea how I can tell Grunt/Bower to include scripts at: bower_components/foundation/js/foundation/foundation.*.js

-=-=-=-=-=-

Additionally, declaring that Foundation initialized also fails in this scenario!

<script>
    $(document).ready(function(){
        $(document).foundation('orbit', 'reflow');
    }):
</script>

Although, everything is working as expected if I run this command from the terminal:

$(document).foundation('orbit', 'reflow');
1

There are 1 answers

0
lakewood On BEST ANSWER

The secret sauce here is that I needed to include the $(document).foundation('orbit', 'reflow'); in my main controller, and not in the index.html.

Using the following block in my build allowed me to include the orbit js.

<!-- build:js(.) scripts/foundation.js -->
<!-- foundation:js -->
<script src="bower_components/foundation/js/foundation/foundation.orbit.js"></script>
<!-- endfoundation -->
<!-- endbuild -->