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包含在inject中的任何地方，其他依赖项是。发生了什么事？

我认为必须有一个简单的解决方案吗？或者与grunt相比，gulp有问题吗？

更新：我正在向一名铁杆狂热分子发出警告，说明与maven相比，bower和节点如何糟糕以及如何在bower安装后你必须在下载后手动修改包的bower.json文件。如果有一些方法可以合法地不必修改bower.json或将其合并到构建过程中，而不必要求开发人员这样做...请更新！

Answer 1

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

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

这对我有用！

Answer 2

是的，正如@Helzgate所说，bootstrap正在考虑 bootstrap.less 作为默认样式文件而不是 bootstrap.css ，你可以通过转到

<强> bower_components /引导/ bower.json

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

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

所以你要做的就是用 dist / css / bootstrap.css 替换 less / bootstrap.less ，如下所示：

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

和VOILA就是它。

Answer 3

我将最初指向* .less文件的根目录中的bower.json文件更改为以下内容：

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

它现在有效。

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

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并且你将会这样做是金色的！

Answer 5

您可以在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'));
});

Answer 6

你最多可以使用Bootstrap 3.3.4。之后，没有注入css。只有JS。这些都在https://github.com/twbs/bootstrap/issues/16663中详尽地提到。在此问题得到解决之前可能需要一段时间。截至今天，它仍未得到解决。事实上，我的工作流程中，wiredep工作得非常漂亮。唯一有效的方法就是gulp-inject，但那就是gulp，而且gulp不是那么Bootstrap友好。

gulp Bower wiredep没有拿起bootstrap.css？

6 个答案: