Menu icon Foundation
Compiling javascript in the Gruntfile

Hey,

Could someone point me in the right direction regarding using the Gruntfile to cut down the Javascript file size?

By default, the foundation.js file is 100kb. However, I'm not using most of the components. I figured it would be as easy as uncommenting the components in my gruntfile, but that doesn't seem to work.

Below is the relevant part of my gruntfile, showing most js components commented out; I've saved, and the cmd window displays "File 'Gruntfile.js' changed", and it's still recognising changes to my sass files. However, foundation.js is still 100kb.

What am I doing wrong?

Thanks!

concat: {
        options: {
          separator: ';',
        },
        dist: {
          src: [

          // Foundation core
          //'bower_components/foundation/js/foundation/foundation.js',
          
          // Pick the componenets you need in your project
          //'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',
          
          // Using all of your custom js files
          'js/custom/*.js'
          
          ],
          // Concat all the files above into one single file
          dest: 'js/foundation.js',
        },
      },

gruntfilejavascript

Hey,

Could someone point me in the right direction regarding using the Gruntfile to cut down the Javascript file size?

By default, the foundation.js file is 100kb. However, I'm not using most of the components. I figured it would be as easy as uncommenting the components in my gruntfile, but that doesn't seem to work.

Below is the relevant part of my gruntfile, showing most js components commented out; I've saved, and the cmd window displays "File 'Gruntfile.js' changed", and it's still recognising changes to my sass files. However, foundation.js is still 100kb.

What am I doing wrong?

Thanks!

concat: {
        options: {
          separator: ';',
        },
        dist: {
          src: [

          // Foundation core
          //'bower_components/foundation/js/foundation/foundation.js',
          
          // Pick the componenets you need in your project
          //'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',
          
          // Using all of your custom js files
          'js/custom/*.js'
          
          ],
          // Concat all the files above into one single file
          dest: 'js/foundation.js',
        },
      },
Rafi Benkual over 4 years ago

This article might help: http://creativitykills.co/getting-started-zurb-foundation-and-grunt-js/

The foundation.js file is the core of the Foundation.js and not the un-minified version of foundation.min.js. So to do what you are trying you would need to uncomment the foundation.js

We individually load plugins like this

<script src="/js/vendor/jquery.js"></script>
<script src="/js/foundation.js"></script>
<script src="/js/foundation.alert.js"></script>
<script src="/js/foundation.dropdown.js"></script>
<script src="/js/foundation.tab.js"></script>

Chris M over 4 years ago

Thanks for your reply Rafi, I will check out that article in the morning when I'm back in the office.

I'd rather be able to compile a foundation.js with just the required components, if that's possible, rather than having multiple JavaScript file requests.

Jacob Moen over 4 years ago

Chris: Take a look at the article that Rafi linked to for a way to make Grunt concatenate the Foundation scripts together. I use a similar approach in my own projects.
Of course, if you're using libsass with Foundation, you already have a Grunt file so some tweaking need to be done to it.