Skip to content

Instantly share code, notes, and snippets.

@themouette
Last active December 15, 2015 05:29
Show Gist options
  • Save themouette/5209261 to your computer and use it in GitHub Desktop.
Save themouette/5209261 to your computer and use it in GitHub Desktop.
boilerplate for grunt + foundation + backbone + requirejs
// 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']
}
}
});
// 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
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']);
};
{
"name": "your-package-name",
"version": "0.0.1",
"description": "",
"homepage": "",
"author": "Your Name <you@example.org>",
"contributors": [
{
"name": "Your Name",
"email": "you@example.org",
"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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment