bower或grunt不断从index.html中删除jquery

时间:2014-02-18 18:50:08

标签: jquery gruntjs bower

这让我发疯了。到目前为止,Bower + Grunt(来自Yeoman)一直是挫败感和浪费时间的主要原因。我想要的只是我的应用程序使用最新的(2.1.0)版本的jquery。

bower list正确地将jquery 2.1.0报告为官方更新。

我运行了bower install --save jquery来更新到最后一个版本。

bower list命令现在正确地将jquery#2.1.0报告为依赖项,并且 bower.json文件现在正确地列出了jquery,并将所需版本作为依赖项:

{
  "name": "xxx",
  "version": "0.0.0",
  "dependencies": {
    ...
    "angular": "1.2.13",
    "jquery": "~2.1.0",
    "sizzle": "1.10.16",
    "bootstrap": "~3.0.3",
    ...

但每次运行grunt buildgrunt serve时,<script src="bower_components/jquery/dist/jquery.js"></script>列表都会从index.html中删除,从而阻止整个应用运行。

#> grunt serve
Running "serve" task

Running "clean:server" (clean) task
Cleaning .tmp...OK

Running "bower-install:app" (bower-install) task

jquery was not injected in your file.
Please go take a look in "app/bower_components/jquery" for the file you need, then manually include it in your file.

Running "concurrent:server" (concurrent) task
...

手动添加它无法解决任何问题。我完全卡住了。肯定会有一些我做错的事情,但是我一直在敲打我的头很长一段时间而完全没有效率。谢谢。

4 个答案:

答案 0 :(得分:22)

这里有一个很长的答案,但我只有时间做一个简短的答案,我想我也可以给它而不是什么!

bower-install是一项依赖于Bower软件包的任务,正确指定其main内的bower.json属性。最近的一些东西继续使用jQuery Bower包,它不再指定这个属性。没有,grunt-bower-install无济于事。

解决方案是在HTML中的<!-- bower:js --><!-- endbower -->块之外手动包含对jQuery的引用。

抱歉沮丧。希望jQuery能很快修复它的bower.json。

答案 1 :(得分:16)

这里有一个更好的解决方案,它不会强迫您将脚本标签从其他凉亭组件移开。您可以使用overrides部分(在https://github.com/ajaxorg/ace-builds/issues/20上找到)

将以下部分添加到您的项目bower.json

...
"overrides": {
    "jquery": {
        "main": "dist/jquery.js"
    }
}

答案 2 :(得分:1)

几分钟前我用grunt + yeoman + bower看到了同样的问题。就我而言,&#34;覆盖&#34;解决方案无效。

grunt wiredep

继续重新排序app / index.html中的条目。结果问题是bower.json的依赖项部分中jquery的位置。在我的例子中,jquery是bower.json中依赖项部分的第9个条目。

grunt wiredep 

然后移动

<script src="bower_components/jquery/dist/jquery.js"></script>

到app / index.html中的#9位置,即使我手动将其设置为#1条目或使用了覆盖。

在我的情况下,jquery需要超前于角度,这次重新排序是在运行时杀死我的应用程序。

bower.json中的我的依赖关系部分看起来像之前

"dependencies": {
    "angular": "1.4.8",
    "angular-animate": "^1.3.0",
    "angular-aria": "^1.3.0",
    "angular-cookies": "^1.3.0",
    "angular-messages": "^1.3.0",
    "angular-resource": "^1.3.0",
    "angular-route": "^1.3.0",
    "angular-sanitize": "^1.3.0",
    "jquery": "^2.2.3",
},

现在,它看起来像这样(注意jquery如何重新定位到位置#1)。

"dependencies": {
    "jquery": "^2.2.3",
    "angular": "1.4.8",
    "angular-animate": "^1.3.0",
    "angular-aria": "^1.3.0",
    "angular-cookies": "^1.3.0",
    "angular-messages": "^1.3.0",
    "angular-resource": "^1.3.0",
    "angular-route": "^1.3.0",
    "angular-sanitize": "^1.3.0",
}

我把它放在这里,以便其他人可以使用这个解决方案,如果没有其他工作。

答案 3 :(得分:0)

简单而恰当的解决方案是在bower.json的覆盖部分添加此引用:就像这里我为jquery-ui添加的。

"overrides": {
    "bootstrap": {
      "main": [
        "less/bootstrap.less",
        "dist/css/bootstrap.css",
        "dist/js/bootstrap.js"
      ]
    },
    "jquery-ui": {
      "main": [
        "themes/base/jquery-ui.css",
        "ui/jquery-ui.js"
      ]
    }
  }

干杯:)