gulpwiredep 拿起凉亭 js 但不是 css答案

【问题标题】：gulp wiredep picking up bower js but nor cssgulpwiredep 拿起凉亭 js 但不是 css
【发布时间】：2015-07-05 21:04:07
【问题描述】：

由于某种原因，我的wiredep 配置正在获取我的bower js 文件，而不是css。

这是我的 gulpfile：

gulp.task('wiredep', function(){

var options = config.getWiredepDefaultOptions();
var wiredep = require('wiredep').stream;

  return gulp
      .src(config.index)
      .pipe($.using())
      .pipe(wiredep(options))
      .pipe($.inject(gulp.src(config.js)))
      .pipe(gulp.dest(config.layout))
});

这是我的 bower.json

    {
  "name": "//",
  "version": "0.0.0",
  "homepage": "//",
  "authors": [
    "//"
  ],
  "description": "//",
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "public/vendor",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "~2.1.4",
    "toastr": "~2.1.1",
    "angular": "~1.4.1",
    "angular-resource": "~1.4.1",
    "angular-route": "~1.4.1",
    "bootstrap": "~3.3.5",
    "angular-mocks": "~1.4.1"
  }
}

我使用 Jade 做模板，JS 是通过的，但不是 css。

doctype
html
    head

        //bower:css
        //endbower

        base(href="/")
        body(ng-app='app')
        include currentUser
        block main-content

        //bower:js
        script(src='/vendor/jquery/dist/jquery.js')
        script(src='/vendor/toastr/toastr.js')
        script(src='/vendor/angular/angular.js')
        script(src='/vendor/angular-resource/angular-resource.js')
        script(src='/vendor/angular-route/angular-route.js')
        script(src='/vendor/bootstrap/dist/js/bootstrap.js')
        script(src='/vendor/angular-mocks/angular-mocks.js')
        //endbower

【问题讨论】：

标签： gulp bower wiredep

【解决方案1】：

试试看。

转到 -> bower_components -> bootstrap -> bower.json

修改“main”属性并写入：

[...]

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

[...]

现在可以了。

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

享受:)

【讨论】：

【解决方案2】：

您的包似乎没有在其 bower.json 文件中正确列出其依赖项。

https://www.npmjs.com/package/wiredep#what-can-go-wrong

您可以像这样覆盖您的 bower.json 中的 packages 主属性：

在 bower.json 中

{
  ...
  "dependencies": {
    "package-without-main": "1.0.0"
  },
  "overrides": {
    "bootstrap": {
      "main": ["dist/js/bootstrap.js", "dist/css/bootstrap.css"]
    }
  }
}

https://www.npmjs.com/package/wiredep#bower-overrides

或者在你的wiredep配置对象中像这样：

wiredepOptions: {
    overrides: {
        angular: {
            dependencies: {
                jquery: '^2.2.0'
            }
        },
        bootstrap: {
            main: ["dist/js/bootstrap.js", "dist/css/bootstrap.css"]
        },
        slimScroll: {
            main: 'jquery.slimscroll.js'
        },
        codemirror: {
            main: [
                'lib/codemirror.js',
                'lib/codemirror.css',
                'mode/markdown/markdown.js',
                'mode/javascript/javascript.js',
                'theme/xq-light.css'
            ]
        },
        'font-awesome': {
            main: 'css/font-awesome.css'
        }
    }
}

【讨论】：