Gulp、Bower和Wiredep无法获取bootstrap.css文件？

Question

我有一个index.html文件，在我的bower.json文件中，我有一个依赖项：

"bootstrap": "~3.3.2"

在 gulp 文件中我有：

  gulp.src('./main.html')
    .pipe(wiredep({
      bowerJson: require('./bower.json')
    }))
    .pipe(gulp.dest('./'));

当我执行此操作时，我看到所有的 CSS 和 JS 都被生成了，但是在注入中没有看到 bootstrap.css 被包含在内，其他依赖项都有。发生了什么？

我想这肯定有一个简单的解决方法吧？或者 gulp 在这方面与 grunt 相比存在问题吗？

更新：一位强硬的 maven 狂热者向我扔出 ****，声称 bower 和 node 相对于 maven 来说很糟糕，并且在 bower 安装之后，您必须手动修改包的 bower.json 文件。如果有某种方法可以合理地不需要修改 bower.json 或将其纳入构建流程中，那么我们就不必要求开发人员这样做...请更新！

- Rolando

---

同样的问题，你能解决吗？ - km1882

这是gulp的问题还是Bootstrap的问题？ - Rolando

我不确定，我仍然遇到了这个问题。 - km1882

Answer 1

我们可以在项目的 bower.json 文件中覆盖主对象，而不是替换/修改 bootstrap 的 bower.json 文件。

"overrides":{
"bootstrap":{
  "main":[
  "dist/js/bootstrap.js",
  "dist/css/bootstrap.min.css",
  "less/bootstrap.less"
  ]
}}

这对我很有效！

- m5c

Answer 2

是的，就像@Helzgate所说，bootstrap现在将bootstrap.less视为默认样式文件，而不是bootstrap.css。您可以通过前往bower_components/bootstrap/bower.json来检查此内容。

然后，您可以清楚地看到主要属性包含以下值：

main": [
    "less/bootstrap.less",
    "dist/js/bootstrap.js"
  ]

所以你需要做的就是将less/bootstrap.less替换为dist/css/bootstrap.css，像这样：

"main": [
    "dist/css/bootstrap.css",
    "dist/js/bootstrap.js"
  ]

就是这样，没错。

- ismnoiet

Answer 3

当我更改了原本指向*.less文件的根目录中的bower.json文件为以下内容后：

"main": ["dist/css/bootstrap.css"],

现在它可以正常工作。

注意：我删除了bootstrap.js的条目，因为我不需要它。

- Post Impatica

---

向Bootstrap发起拉取请求？ - Rolando

我不确定你在问什么。请查看你的 \bower_components\bootstrap\ 文件夹，里面会有一个名为 bower.json 的文件，请编辑它并将 "main" 部分更改为我上面所述的内容。 - Post Impatica

Answer 4

这是Bootstrap最新版本3.3.5的一个问题。请参阅以下GitHub问题以获取更多信息：

https://github.com/twbs/bootstrap/issues/16663

在其他话说，它应该可以正常工作直到3.3.4版本。确保在Bower中列出你想要使用的实际版本；例如，在已经安装了3.3.5之后在你的bower.json中使用~3.3.2仍然会使Bower回退到3.3.5，只需将其更改为3.3.2而不是~3.3.2，你就可以放心使用了！

- GavinG

Answer 5

您可以像这样在wiredep选项中设置覆盖：

您可以在wiredep选项中设置覆盖，例如：

gulp.task('bower',['inject-js'],function(){
return gulp.src('./www/index.html')
    .pipe(wiredep({
        "overrides" : {
            "bootstrap":{
                "main":[Set the path to any thing you like]
            }
        },
        directory:'./www/lib/'
    }))
    .pipe(gulp.dest('./www'));
});

- jsDevia

---

这种方法更好。我尝试了标记为答案的那个，但如果运行“bower install”，它会重置bootstrap目录中的bower.json文件（正如预期的那样）。这种方法避免了修改该文件并意外重置它的风险。 - MikeScott8

使用Bower时需要注意的一点是，不要修改Bower文件夹中的任何文件。 - jsDevia

Answer 6

你可以使用Bootstrap 3.3.4版本。在那之后不会注入任何css，只有JS。这些都在https://github.com/twbs/bootstrap/issues/16663中详细说明。这可能需要一段时间才能解决。截至今天，它仍未解决。问题在于wiredep与我的工作流非常相容。唯一其他有效的工具是gulp-inject，但那是gulp，而gulp对Bootstrap不够友好。

- Maria Campbell