连接 Bootstrap、jQuery 和本地 JavaScript - 打破 jQuery答案

【问题标题】：Concatenating Bootstrap, jQuery and local JavaScript - breaks jQuery连接 Bootstrap、jQuery 和本地 JavaScript - 打破 jQuery
【发布时间】：2015-06-04 10:54:22
【问题描述】：

目前我为我的本地“主题”缩小并连接我的 JavaScript 和 CSS 文件。然后我将 Bootstrap、jQuery 和本地 JavaScript/css 文件加载到我的网站头部。

虽然这可行，但它确实会导致 8 个单独的资源加载，而不是我想要完成的 2 个（1 个用于 JS，1 个用于 CSS）。（此时我不想异步加载多个库）。

我在我的构建系统中使用 Grunt 来调用 Uglify 操作来缩小我的 JavaScript。

下面是我的 Gruntfile.js 的相关部分

uglify: {
    build: {
        files: [{
            src: ['src/main/webapp/js/vendor/*.js', 'src/main/webapp/js/*.js', '!src/main/webapp/js/output.min.js'],
            dest: 'src/main/webapp/js/output.min.js'
        }]
    }
}

我认为通过将已经缩小的 jQuery 和 Bootstrap 库指定给 Uglify 操作，我可以让它将库与缩小的“主题”JavaScript 结合起来。但是，这样做时，我会在浏览器中收到以下错误：

Uncaught Error: Bootstrap's JavaScript requires jQuery
Uncaught ReferenceError: $ is not defined
Uncaught ReferenceError: $ is not defined

显然，通过连接和缩小这些文件，我破坏了一些东西。

有人有什么建议吗？为了确定，我已经尝试使用 Bootstrap 和 jQuery 库的缩小和未缩小版本。

干杯，安迪

【问题讨论】：

标签： javascript jquery css twitter-bootstrap minify

【解决方案1】：

问题是你在 jQuery 之前包含了 bootstrap 的 javascript 文件。

Bootstrap 依赖于 jQuery。您需要先包含 jQuery，然后再包含需要 jQuery 的任何内容。

【讨论】：

哈，现在我感觉自己像个木偶……通过执行 /vendor/*.js 显然是按字母顺序遍历文件 - 在 jQuery 之前执行 Bootstrap。我现在已经明确地按顺序设置了每个文件，并且效果很好。不敢相信我错过了。非常感谢

【解决方案2】：

假设您使用标准 grunt-contrib-concat 进行连接，您需要确保以正确的顺序指定文件。

例如，在我的工作 Grunt 配置文件中（我使用 Foundation 而不是 Bootstrap，但它们都依赖于 jQuery）我的供应商/外部文件具有以下设置。 build/external.all.min.js 是先从 jQuery 构建的预压缩代码，然后是基础，然后是所有其他脚本。

files: {
  'build/external-all.min.js': [
  'build/external/jquery.min.js',
  'build/external/foundation.min.js',
  'build/external/*.js']
}

【讨论】：

我最近经历了这个。如果你想使用 Grunt 来连接你的脚本，你必须手动确保正确的文件顺序，至少对于那些没有依赖关系的文件。与某些样式表相同，如果您依赖它们正确级联并且不要使用@imports。
您好，谢谢您-事实证明这是我没有接受的订购问题。我将@Ivanka Tordorova 的答案标记为正确只是因为它排在第一位。感谢您的帮助！