javascript - Grunt 多次连接 JS 文件

Question

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

fullPage:Fullpage.js 只能初始化一次，而您需要多次初始化!

这是我的 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 中列出的所有第 3 方库。

/// <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 中提到的路径中可能存在一些通用文件。

您可能应该将所有 vendor 文件(例如 jquery)从公共(public)目录中移出，并放入另一个不同的目录中，例如 vendor 。

你的 src 应该看起来像这样

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

正如您现在所看到的，这两个路径之间没有公共(public)文件。

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

编辑:

啊!我明白你的问题是什么。您希望在其他 vendor 文件中首先拥有 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 可能不是您将来面临的唯一依赖问题。