Question

目前，我将我的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库的缩小版和未编译版本来确定。

干杯，安迪

Answer 1

问题是你在jQuery之前包含了bootstrap的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']
}

连接Bootstrap，jQuery和本地JavaScript - 打破jQuery

2 个答案: