Grunt 多次连接 JS 文件

Question

我正在开发一个 Node.js 网站，我正在使用 Grunt 来合并和缩小我的 CSS 和 JS 文件。但是，在运行 grunt 命令后，我收到了错误消息：

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

这是我的 grunt 文件：

/*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"]);
};

如果有的话，我会认为 jQuery 会被多次连接，但事实并非如此。有什么建议我可能做错了吗？

编辑：这是我升级后的 grunt 文件，其中包含 concat.src 中列出的所有 3rd 方库。

/// <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"]);
};

Answer 1

您的问题似乎在concate.js.src

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

这将多次添加您的文件，因为在 src 中提到的路径中可能有一些共同的文件。

您可能应该将所有供应商文件（如 jquery）从公共目录中移出并放入另一个文件，例如供应商。

你的 src 应该看起来像

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

正如你现在看到的，这两个路径之间没有共同的文件。

始终将第 3 方代码作为同级文件夹放在您的应用目录之外，而不是在其中。

编辑：

啊！我知道你有什么问题。您希望在其他供应商文件中首先拥有 jquery。

public/lib/**/jquery.js 和 public/lib/**/*.js 一起可能会导致文件添加两次。

试试这个

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

将jquery的完整路径放在public/lib/jquery/jquery.js前面，然后!public/lib/jquery/jquery.js应该防止jquery作为public/lib/**/*.js的一部分再次添加

从这里得到上述模式http://gruntjs.com/configuring-tasks#globbing-patterns

如果这仍然不起作用，那么另一种选择是单独添加 src 数组中的所有路径。如果您有 requirejs 配置，只需从那里复制路径，因为 jquery 可能不是您将来面临的唯一依赖问题。