boilerplate for grunt + foundation + backbone + requirejs

0_README.md

requirejs config and Gruntfile to use with zurb foundation, Backbonejs and lodash or underscorejs.

Works for foundation 4.0 with requirejs 2.x and grunt 0.4

# for dev
$ npm install

# for production
$ npm install --production

config.js

// public/javascripts/config.js
requirejs.config({
    // load foundation and application kernel
    deps: ['app/foundation.app', 'app/kernel'],
    baseUrl: '/javascripts/',
    paths: {
        // `vendor` libs are located under `baseUrl`vendor
        'vendor': 'vendor',
        // `app` module is located under `baseUrl`src
        'app': 'src',
        // `foundation stuff is located under `baseUrl`foundation
        'foundation': 'foundation'
    },
    map: {
        '*': {
            // `vendor/jquery` can either refer to jquery or zepto
            'vendor/jquery': 'vendor/zepto',
            // To use lodash instead of underscore
            'vendor/underscore': 'vendor/lodash.underscore'
        }
    },
    shim: {
        'vendor/backbone': {
            //These script dependencies should be loaded before loading
            //backbone.js
            deps: ['vendor/underscore', 'vendor/jquery'],
            //Once loaded, use the global 'Backbone' as the
            //module value.
            exports: 'Backbone'
        },
        'vendor/lodash.underscore': {
            exports: '_'
        },
        'vendor/underscore': {
            exports: '_'
        },

        'foundation/foundation.alerts': {
            deps: ['foundation/foundation']
        },

        'foundation/foundation.clearing': {
            deps: ['foundation/foundation']
        },

        'foundation/foundation.cookie': {
            deps: ['foundation/foundation']
        },

        'foundation/foundation.dropdown': {
            deps: ['foundation/foundation']
        },

        'foundation/foundation.forms': {
            deps: ['foundation/foundation']
        },

        'foundation/foundation.joyride': {
            deps: ['foundation/foundation']
        },

        'foundation/foundation': {
            deps: ['vendor/jquery']
        },

        'foundation/foundation.magellan': {
            deps: ['foundation/foundation']
        },

        'foundation/foundation.orbit': {
            deps: ['foundation/foundation']
        },

        'foundation/foundation.placeholder': {
            deps: ['foundation/foundation']
        },

        'foundation/foundation.reveal': {
            deps: ['foundation/foundation']
        },

        'foundation/foundation.section': {
            deps: ['foundation/foundation']
        },

        'foundation/foundation.tooltips': {
            deps: ['foundation/foundation']
        },

        'foundation/foundation.topbar': {
            deps: ['foundation/foundation']
        }
    }
});

foundation.app.js

// public/javascripts/src/foundation.app.js
define([
    'vendor/jquery',
    'foundation/foundation',
    'foundation/foundation.tooltips',
    'foundation/foundation.reveal',
    'foundation/foundation.forms',
    'foundation/foundation.orbit',
    'foundation/foundation.clearing',
    'foundation/foundation.magellan',
    'foundation/foundation.joyride',
    'foundation/foundation.section',
    'foundation/foundation.alerts',
    'foundation/foundation.placeholder',
    'foundation/foundation.cookie',
    'foundation/foundation.topbar',
    'foundation/foundation.dropdown'
], function ($) {
    $(document).foundation();
});

Gruntfile.js

// Gruntfile.js
module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
        options: {
            separator: ';',
            stripBanners: true,
            banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
                            '<%= grunt.template.today("yyyy-mm-dd") %> */'
        },
        // In dev phase load module asynchronously.
        // only concat require and config file.
        dev: {
            src: ['javascripts/vendor/require.js', 'javascripts/config.js'],
            dest: 'build/<%= pkg.name %>.js'
        },
        release: {
            src: ['javascripts/vendor/almond.js', 'javascripts/config.js'],
            dest: 'build/<%= pkg.name %>.js'
        }
    },
    requirejs: {
        main: {
            options: {
                baseUrl: "/",
                mainConfigFile: "javascripts/config.js",
                out: "build/<%= pkg.name %>.js"
            }
        }
    },
    compass: {
        dist: {                   // Target
            options: {              // Target options
                sassDir: 'sass',
                cssDir: 'css',
                environment: 'production'
            }
        },
        dev: {                    // Another target
            options: {
                sassDir: 'sass',
                cssDir: 'css'
            }
        }
    },
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'build/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.js'
      }
    },

    watch: {
        'script-dev': {
            files: ['javascripts/*.js'],
            tasks: ['concat:dev']
        },
        'compass-dev': {
            files: ['sass/**/*.scss'],
            tasks: ['compass:dev']
        }
    }
  });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-requirejs');
  grunt.loadNpmTasks('grunt-contrib-compass');
  grunt.loadNpmTasks('grunt-contrib-watch');

  // Default task(s).
  grunt.registerTask('dev', ['compass', 'concat:dev']);
  grunt.registerTask('release', ['compass', 'require', 'concat:release', 'uglify']);

};

package.json

{
  "name": "your-package-name",
  "version": "0.0.1",
  "description": "",
  "homepage": "",
  "author": "Your Name <[email protected]>",
  "contributors": [
    {
      "name": "Your Name",
      "email": "[email protected]",
      "url": ""
    }
  ],
  "dependencies": {},
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.1.1",
    "grunt-contrib-compass": "~0.1.3",
    "grunt-contrib-requirejs": "~0.4.0",
    "grunt-contrib-uglify": "~0.2.0",
    "grunt-contrib-concat": "~0.1.3",
    "grunt-contrib-watch": "~0.3.1"
  }
}