连接 Bootstrap、jQuery 和本地 JavaScript - 中断 jQuery

Question

目前，我正在为我的本地 'theme' 缩小并连接我的 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 操作，我可以让它将这些库与我缩小的 'theme' JavaScript .但是，这样做时，我的浏览器会收到以下错误消息：

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

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

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

干杯，安迪

Answer 1

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

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

的内容

Answer 2

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

例如，在我的工作 Grunt 配置文件中（我使用 Foundation 而不是 Bootstrap，但它们都依赖于 jQuery）我的 vendor/external 文件。 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']
}

连接 Bootstrap、jQuery 和本地 JavaScript - 中断 jQuery

Concatenating Bootstrap, jQuery and local JavaScript - breaks jQuery

javascript

css

jquery

minify

twitter-bootstrap