'Concatenate / compile Zurb Foundation JavaScript with Grunt.js?

I'm using Grunt.js and Bower for my Foundation project. Everything is working perfectly besides compiling Foundation's JavaScript correctly.

I'm sure this is due to the way Foundation's JavaScript has been redone in version 6 and now using 'import'.

When accessing it in the browser, I get the following two errors in the console:

Uncaught SyntaxError: Cannot use import statement outside a module (at foundation.js:1:40) lp.html:170

Uncaught TypeError: $(...).foundation is not a function at lp.html:170:19

How do I properly compile Foundation's JavaScript?

Here's the JS part of my Gruntfile.js

        /**
        Combine JS files
        https://github.com/gruntjs/grunt-contrib-concat
    **/
    concat: {
        options: {
            stripBanners: true,
            separator: ';',
            banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' + '<%= grunt.template.today("yyyy-mm-dd") %> */',
        },
        default: {
            files: {
                '<%= path.dist.js %>/jquery.js': 'bower_components/jquery/dist/jquery.js',
                '<%= path.dist.js %>/what-input.js': 'bower_components/what-input/what-input.js',
                '<%= path.dist.js %>/foundation.js': [
                    // Core Foundation files
                    '<%= path.zf %>/js/foundation.core.js',
                    '<%= path.zf %>/js/foundation.core.plugins.js',
                    '<%= path.zf %>/js/foundation.core.utils.js',
                    '<%= path.zf %>/js/foundation.util.*.js',

                    // Individual Foundation components
                    // If you aren't using a component, just remove it from the list
                    '<%= path.zf %>/js/foundation.abide.js',
                    '<%= path.zf %>/js/foundation.accordion.js',
                    '<%= path.zf %>/js/foundation.accordionMenu.js',
                    '<%= path.zf %>/js/foundation.drilldown.js',
                    '<%= path.zf %>/js/foundation.dropdown.js',
                    '<%= path.zf %>/js/foundation.dropdownMenu.js',
                    '<%= path.zf %>/js/foundation.equalizer.js',
                    '<%= path.zf %>/js/foundation.interchange.js',
                    '<%= path.zf %>/js/foundation.magellan.js',
                    '<%= path.zf %>/js/foundation.offcanvas.js',
                    '<%= path.zf %>/js/foundation.orbit.js',
                    '<%= path.zf %>/js/foundation.positionable.js',
                    '<%= path.zf %>/js/foundation.responsiveAccordionTabs.js',
                    '<%= path.zf %>/js/foundation.responsiveMenu.js',
                    '<%= path.zf %>/js/foundation.responsiveToggle.js',
                    '<%= path.zf %>/js/foundation.reveal.js',
                    '<%= path.zf %>/js/foundation.slider.js',
                    '<%= path.zf %>/js/foundation.smoothScroll.js',
                    '<%= path.zf %>/js/foundation.sticky.js',
                    '<%= path.zf %>/js/foundation.tabs.js',
                    '<%= path.zf %>/js/foundation.toggler.js',
                    '<%= path.zf %>/js/foundation.tooltip.js',
                ],
            }
        },
    },

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Concatenate / compile Zurb Foundation JavaScript with Grunt.js?

Sources

Related Questions