The Foundation 5 framework provides an extremely handy sass package with Grunt preinstalled - even Gruntfile.js is preconfigured to compile all Foundation’s sass file on the fly - Long live Foundation!
Surprisingly, there is no Grunt configurations for javascript out of the box, despite js plays a significant part in the framework.
The default workflow is then including foundation.min.js - choked with tons of custom Foundation js libraries, some of which is never used in our project. Thus, adding only needed Foundation libraries is a more efficient way, the downside is each library comes without minification:
<!-- Required javascript libraries -->
<script type="text/javascript" src="bower_components/foundation/js/vendor/modernizr.js"></script>
<script type="text/javascript" src="bower_components/foundation/js/vendor/jquery.js"></script>
<!-- Foundation libraries: (un-minified) -->
<script type="text/javascript" src="bower_components/foundation/js/foundation/foundation.js"></script>
<script type="text/javascript" src="bower_components/foundation/js/foundation/dropdown.js"></script>
<script type="text/javascript" src="bower_components/foundation/js/foundation/dropdown.js"></script>
<script type="text/javascript" src="bower_components/foundation/js/foundation/offcanvas.js"></script>
<script type="text/javascript" src="bower_components/foundation/js/foundation/slider.js"></script>
<script type="text/javascript" src="bower_components/foundation/js/foundation/orbit.js"></script>
<script type="text/javascript" src="bower_components/foundation/js/foundation/equalizer.js"></script>
<script type="text/javascript" src="bower_components/foundation/js/foundation/joyride.js"></script>
<!-- Your App js (un-minified) -->
<script type="text/javascript" src="js/app.js"></script>
This is where Grunt comes in to save us tons of time:
Grunt for Foundation 5 Javascript:
Before starting, we’ll need to make sure Grunt and Foundation Cli are installed on the system. Otherwise, follow the installation steps on foundation size
Create a new Foundation project:
foundation new my_project --libsass
Modify package.json file in the project’s root folder to add more modules to process javascripts:
{
"name": "foundation-libsass-template",
"version": "0.0.1",
"devDependencies": {
"node-sass": "~0.7.0",
"grunt": "~0.4.1",
"grunt-contrib-watch": "~0.5.3",
"grunt-sass": "~0.14.1",
"grunt-contrib-jshint": "~0.10.0", // check of js syntax errors
"grunt-contrib-uglify": "~0.5.0", // minify all javascript
"load-grunt-tasks": "~0.6.0", // automatically load nom tasks
// (optional) only for hipsters:
"time-grunt": "~0.3.2", // shows a processing bar and how much time each task takes
"grunt-notify": "~0.3.1" // show results on your OS notification
// MAKE SURE THERE IS NO TRAILING COMMA "," AFTER THE LAST LINE
}
}
Modify Gruntfile.js:
You can look at the whole Gruntfile.js file in my git repo, but this is the most simple plug and play config block from the whole file:
// Include only what you want! No trailing ","!
var jsLibs = [
// 'bower_components/foundation/js/vendor/modernizr.js', // updated - include modernizr separately at <head> and move the rest of [jsLibs] to before </body> for better page load
'bower_components/foundation/js/vendor/jquery.js',
'bower_components/foundation/js/vendor/jquery.cookie.js',
'bower_components/foundation/js/vendor/placeholder.js',
'bower_components/foundation/js/vendor/fastclick.js'
];
// Include only what you want! No trailing ","!
var jsFoundation = [
'bower_components/foundation/js/foundation/foundation.js',
'bower_components/foundation/js/foundation/foundation.abide.js',
'bower_components/foundation/js/foundation/foundation.accordion.js',
'bower_components/foundation/js/foundation/foundation.alert.js',
'bower_components/foundation/js/foundation/foundation.clearing.js',
'bower_components/foundation/js/foundation/foundation.dropdown.js',
'bower_components/foundation/js/foundation/foundation.equalizer.js',
'bower_components/foundation/js/foundation/foundation.interchange.js',
'bower_components/foundation/js/foundation/foundation.joyride.js',
'bower_components/foundation/js/foundation/foundation.magellan.js',
'bower_components/foundation/js/foundation/foundation.offcanvas.js',
'bower_components/foundation/js/foundation/foundation.orbit.js',
'bower_components/foundation/js/foundation/foundation.reveal.js',
'bower_components/foundation/js/foundation/foundation.slider.js',
'bower_components/foundation/js/foundation/foundation.tab.js',
'bower_components/foundation/js/foundation/foundation.tooltip.js',
'bower_components/foundation/js/foundation/foundation.topbar.js'
];
// Your custom javascript files. No trailing ","!
var jsApp = [
'js/app.js',
'js/_*.js'
];
Create a .jshintrc file in project’s root folder to remove warning when running Grunt:
{
"bitwise": true,
"browser": true,
"curly": true,
"eqeqeq": true,
"eqnull": true,
"esnext": true,
"immed": true,
"jquery": true,
"latedef": true,
"newcap": true,
"noarg": true,
"node": true,
"strict": false,
"trailing": true
}
Now, update node-modules and start using Grunt!
bower install
npm install
grunt build
grunt watch
Add these files to your html:
<head>
<script type="text/javascript" src="bower_components/foundation/js/vendor/modernizr.js"></script>
</head>
<body>
<!-- .............. -->
<!-- before </body> -->
<!-- Required javascript libraries -->
<script type="text/javascript" src="js/libs/libs.min.js"></script>
<!-- Foundation libraries: (minified) -->
<script type="text/javascript" src="js/libs/foundation.min.js"></script>
<!-- Your App js (minified) -->
<script type="text/javascript" src="js/app.min.js"></script>
</body>
Create a .jshintrc file in project’s root folder to remove warning when running Grunt:
{
"bitwise": true,
"browser": true,
"curly": true,
"eqeqeq": true,
"eqnull": true,
"esnext": true,
"immed": true,
"jquery": true,
"latedef": true,
"newcap": true,
"noarg": true,
"node": true,
"strict": false,
"trailing": true
}
Get the pre-configured package from Github: