0

I'm working on a Node.js website and I'm using Grunt to concat and minify my CSS and JS files. However, after running the grunt command I'm getting the error message:

fullPage: Fullpage.js can only be initialized once and you are doing it multiple times!

Here's my grunt file:

/*global module */
module.exports = function (grunt) {
    "use strict";
    grunt.initConfig({
        // read in the project settings from the package.json file into the pkg property
        pkg: grunt.file.readJSON("package.json"),

        // Install only the bower packages that we need
        bower: {
            install: {
                options: {
                    "targetDir": "./public/lib",
                    "copy": true,
                    "cleanup": true,
                    "install": true
                }
            }
        },

        concat: {
            css: {
                src: ["public/lib/css/**/*.css", "public/css/cts.css"],
                dest: "public/lib/dist/main.css"
            },
            js: {
                src: ["public/lib/**/jquery.js", "public/lib/**/*.js", "public/js/cts.js"],
                dest: "public/lib/dist/main.js"
            }
        },

        cssmin: {
            target: {
                files: {
                    "public/lib/dist/main.min.css": "public/lib/dist/main.css"
                }
            }
        },

        uglify : {
            js: {
                files: {
                    "public/lib/dist/main.min.js": "public/lib/dist/main.js"
                }
            }
        },

        copy: {
            files: {
                expand: true,
                flatten: true,
                src: ["public/lib/fonts/**/*"],
                dest: "public/lib/fonts/",
                filter: "isFile"
            }
        }
    });

    // Add all plugins that your project needs here
    grunt.loadNpmTasks("grunt-bower-task");
    grunt.loadNpmTasks("grunt-contrib-concat");
    grunt.loadNpmTasks("grunt-contrib-copy");
    grunt.loadNpmTasks("grunt-contrib-cssmin");
    grunt.loadNpmTasks("grunt-contrib-uglify");
    grunt.loadNpmTasks("grunt-contrib-watch");

    // this would be run by typing "grunt test" on the command line
    // the array should contains the names of the tasks to run
    grunt.registerTask("test", []);

    // define the default task that can be run just by typing "grunt" on the command line
    // the array should contains the names of the tasks to run
    grunt.registerTask("default", [ "bower", "concat", "cssmin", "uglify", "copy"]);
    grunt.registerInitTask("install", ["bower"]);
};

If anything I would have thought jQuery would be the one that's getting concatenated multiple times but it's not. Any suggestions what I might be doing wrong?

EDIT: Here's my upgraded grunt file with all 3rd party libraries listed in the concat.src.

/// <binding BeforeBuild='default' />
/*global module */
module.exports = function (grunt) {
    "use strict";
    grunt.initConfig({
        // read in the project settings from the package.json file into the pkg property
        pkg: grunt.file.readJSON("package.json"),

        // Install only the bower packages that we need
        bower: {
            install: {
                options: {
                    "targetDir": "./public/lib",
                    "copy": true,
                    "cleanup": true,
                    "install": true
                }
            }
        },

        concat: {
            css: {
                src: ["public/lib/css/**/*.css", "public/css/cts.css"],
                dest: "public/lib/dist/main.css"
            },
            js: {
                src: [
                    "public/lib/js/jquery/jquery.js",
                    "public/lib/js/bootstrap/bootstrap.js",
                    "public/lib/js/fullpage.js/jquery.fullpage.js",
                    "public/lib/js/jquery-easing-original/jquery.easing.js",
                    "public/lib/js/slimscroll/jquery.slimscroll.js",
                    "public/lib/js/wow/wow.js",
                    "public/js/cts.js"
                    ],
                dest: "public/lib/dist/main.js"
            }
        },

        cssmin: {
            target: {
                files: {
                    "public/lib/dist/main.min.css": "public/lib/dist/main.css"
                }
            }
        },

        uglify : {
            js: {
                files: {
                    "public/lib/dist/main.min.js": "public/lib/dist/main.js"
                }
            }
        },

        copy: {
            files: {
                expand: true,
                flatten: true,
                src: ["public/lib/fonts/**/*"],
                dest: "public/lib/fonts/",
                filter: "isFile"
            }
        }
    });

    // Add all plugins that your project needs here
    grunt.loadNpmTasks("grunt-bower-task");
    grunt.loadNpmTasks("grunt-contrib-concat");
    grunt.loadNpmTasks("grunt-contrib-copy");
    grunt.loadNpmTasks("grunt-contrib-cssmin");
    grunt.loadNpmTasks("grunt-contrib-uglify");
    grunt.loadNpmTasks("grunt-contrib-watch");

    // this would be run by typing "grunt test" on the command line
    // the array should contains the names of the tasks to run
    grunt.registerTask("test", []);

    // define the default task that can be run just by typing "grunt" on the command line
    // the array should contains the names of the tasks to run
    grunt.registerTask("default", [ "bower", "concat", "cssmin", "uglify", "copy"]);
    grunt.registerTask("combine", [ "concat", "cssmin", "uglify", "copy"]);
    grunt.registerInitTask("install", ["bower"]);
};
Pallas
  • 1,499
  • 5
  • 25
  • 57
  • Is there a specific reason the jquery path contains wildcards? Seems unnecessary – theaccordance May 24 '16 at 13:13
  • There's multiple people on this project and the nested structure could change. The wildcards helps ensure this continues to work so long as the files are located somewhere under `public/lib/`. – Pallas May 25 '16 at 13:48

1 Answers1

1

Your issue seems to be in concate.js.src

src: ["public/lib/**/jquery.js", "public/lib/**/*.js", "public/js/cts.js"]

This will have your files added multiple times as there might some files common among the paths mentioned in src.

You should probably move all your vendor files like jquery out of the public directory and put in a different one, say vendor.

Your src should then look something like

src: ["vendor/**/*.js", "public/**/*.js"]

As you see now there are no common files among these two paths.

Also its a good practice to always have 3rd party code outside your app directory as a sibling folder and not inside it.

EDIT:

Ah! I see whats your problem. You want to have jquery first among the other vendor files.

public/lib/**/jquery.js and public/lib/**/*.js together might be causing files added twice.

Try this 

src: ["public/lib/jquery/jquery.js", "public/lib/**/*.js",  "!public/lib/jquery/jquery.js", public/js/cts.js"]

Put the full path of jquery first public/lib/jquery/jquery.js and then the !public/lib/jquery/jquery.js should prevent jquery being added again as part of public/lib/**/*.js

Got the above pattern from here http://gruntjs.com/configuring-tasks#globbing-patterns

If this still doesn't work, then another option is to add all paths in the src array individually. If you have a requirejs config just copy the paths from there, as jquery might not be the only dependency issue you face in future.

shinobi
  • 2,511
  • 1
  • 19
  • 27
  • All the files inside of the `public/lib/**` are just vendor files. That's why I've got them in a lib folder. The only reason my current src configuration isn't as simple as your is because one of those files is the Bootstrap JS file and jQuery has to be added first otherwise it won't work. – Pallas May 25 '16 at 03:52
  • @RandomlyKnighted: Understood. I have edited the answer. See if that helps – shinobi May 25 '16 at 07:05
  • after doing that it ended up saying that jQuery and one of my other vendor files was not defined..so I went through and added all paths individually and I'm still getting an error saying that it's being one of the vendor files is being initialized multiple times. – Pallas May 25 '16 at 12:18
  • Have you tried loading all files individually without concatenation? Does it still give the same error? May be the issue is not with concatenation at all – shinobi May 25 '16 at 12:22
  • Our live site loads all the files manually without concatenation and I don't get the error at all. – Pallas May 25 '16 at 13:10
  • Can you give the entire src with individual paths? – shinobi May 25 '16 at 13:14
  • I've updated my question above with the full gruntfile so you can see all the individual paths. – Pallas May 25 '16 at 13:40
  • Dont see anything wrong in your updated question. Only thing I can ask you to look at is check the order in which the files are being loaded on your live website. Check if it is the same in your grunt file. Thats all I can think of right now – shinobi May 29 '16 at 07:01