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

Question

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

虽然这可行，但确实会导致8个单独的资源负载，而不是我想要完成的2个（对于JS为1，对于CSS为1）。 （目前，我不打算异步加载多个库）。

我在构建系统中使用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库的最小和最小版本。

干杯，安迪

Answer 1

问题是您在jQuery之前包含了引导程序的javascript文件。

Bootstrap是jQuery依赖的。 您需要先包含jQuery，然后再包含任何需要jQuery的对象。

Answer 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']
}