Skip to content

Instantly share code, notes, and snippets.

@radiosilence
Created November 8, 2012 18:19
Show Gist options
  • Save radiosilence/4040553 to your computer and use it in GitHub Desktop.
Save radiosilence/4040553 to your computer and use it in GitHub Desktop.
RequireJS with Zurb Foundation
requirejs.config({
shim: {
'foundation/jquery.foundation.topbar': {
deps: ['jquery'],
},
'foundation/jquery.cookie': {
deps: ['jquery']
},
'foundation/jquery.event.move': {
deps: ['jquery']
},
'foundation/jquery.event.swipe': {
deps: ['jquery']
},
'foundation/jquery.foundation.accordion': {
deps: ['jquery']
},
'foundation/jquery.foundation.alerts': {
deps: ['jquery']
},
'foundation/jquery.foundation.buttons': {
deps: ['jquery']
},
'foundation/jquery.foundation.clearing': {
deps: ['jquery']
},
'foundation/jquery.foundation.forms': {
deps: ['jquery']
},
'foundation/jquery.foundation.joyride': {
deps: ['jquery']
},
'foundation/jquery.foundation.magellan': {
deps: ['jquery']
},
'foundation/jquery.foundation.mediaQueryToggle': {
deps: ['jquery']
},
'foundation/jquery.foundation.navigation': {
deps: ['jquery']
},
'foundation/jquery.foundation.orbit': {
deps: ['jquery']
},
'foundation/jquery.foundation.reveal': {
deps: ['jquery']
},
'foundation/jquery.foundation.tabs': {
deps: ['jquery']
},
'foundation/jquery.foundation.tooltips': {
deps: ['jquery']
},
'foundation/jquery.foundation.topbar': {
deps: ['jquery']
},
'foundation/jquery.offcanvas': {
deps: ['jquery']
},
'foundation/jquery.placeholder': {
deps: ['jquery']
},
'foundation/app': {
deps: [
'foundation/jquery.cookie',
'foundation/jquery.event.move',
'foundation/jquery.event.swipe',
'foundation/jquery.foundation.accordion',
'foundation/jquery.foundation.alerts',
'foundation/jquery.foundation.buttons',
'foundation/jquery.foundation.clearing',
'foundation/jquery.foundation.forms',
'foundation/jquery.foundation.joyride',
'foundation/jquery.foundation.magellan',
'foundation/jquery.foundation.mediaQueryToggle',
'foundation/jquery.foundation.navigation',
'foundation/jquery.foundation.orbit',
'foundation/jquery.foundation.reveal',
'foundation/jquery.foundation.tabs',
'foundation/jquery.foundation.tooltips',
'foundation/jquery.foundation.topbar',
'foundation/jquery.offcanvas',
'foundation/jquery.placeholder',
'foundation/modernizr.foundation',
]
}
}
});
require([ 'jquery'
, 'foundation/jquery.cookie'
, 'foundation/jquery.event.move'
, 'foundation/jquery.event.swipe'
, 'foundation/jquery.foundation.accordion'
, 'foundation/jquery.foundation.alerts'
, 'foundation/jquery.foundation.buttons'
, 'foundation/jquery.foundation.clearing'
, 'foundation/jquery.foundation.forms'
, 'foundation/jquery.foundation.joyride'
, 'foundation/jquery.foundation.magellan'
, 'foundation/jquery.foundation.mediaQueryToggle'
, 'foundation/jquery.foundation.navigation'
, 'foundation/jquery.foundation.orbit'
, 'foundation/jquery.foundation.reveal'
, 'foundation/jquery.foundation.tabs'
, 'foundation/jquery.foundation.tooltips'
, 'foundation/jquery.foundation.topbar'
, 'foundation/jquery.offcanvas'
, 'foundation/jquery.placeholder'
, 'foundation/modernizr.foundation'
, 'foundation/app'
], function($) {
$(document).ready(function() {
console.log("PARP");
});
})
@dbashford
Copy link

Stumbled across this while learning about foundation.

The shim config can take an array when the dependencies do not need to export anything. So this:

"foundation/jquery.cookie": { deps: ["jquery"] },

can be this:

"foundation/jquery.cookie": ["jquery"]

Been playing with it and the foundation JavaScript that comes out of an Bower install and I've cut all that requirejs boilerplate down a bit. (Pardon the coffeescript)

require
  paths:
    jquery: 'vendor/jquery'
    f:      'vendor/foundation'
  shim:
    "vendor/foundation/foundation": ["jquery"]
  , ["jquery", "vendor/foundation/foundation"]
  , ($) ->

    requirejs [
      "f/foundation.alerts"
      "f/foundation.clearing"
      "f/foundation.cookie"
      "f/foundation.dropdown"
      "f/foundation.forms"
      "f/foundation.interchange"
      "f/foundation.joyride"
      "f/foundation.magellan"
      "f/foundation.orbit"
      "f/foundation.placeholder"
      "f/foundation.reveal"
      "f/foundation.section"
      "f/foundation.tooltips"
      "f/foundation.topbar"], ->
    ...

I also seem to require having foundation itself loaded first, so I did shim that. This is what I ended up with. Not doing anything with it, but it all loads in the proper order and optimizes correctly. I'm new foundation, but have to convert a Rails app to use RequireJS via Mimosa and Foundation is one of the first things I'm moving over.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment