Grunt for Foundation 5 javascript

2014/08/09

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:

https://github.com/nathandao/foundation-grunt-js