Grunt & Bower & grunt-wiredep

Question

我想同时使用 grunt 和 bower。要将 Bower 组件直接注入 index.html 使用 grunt-wiredep。

但是有一个问题，bower.json中存在的一些依赖项仍然没有包含在*.html

中

bower.json

{
  "name": "***",
  "version": "***",
  "dependencies": {},
  "devDependencies": {
    "jquery": "~2.1.1",
    "angular": "1.4.x",
    "bootstrap": "~3.1.1",
    ...
  },
  "resolutions": {
    ..
  }
}

gruntfile.js

....
wiredep: {

      task: {
        src: [
          'app/index.html'
        ],
        options: {
          dependencies: true,
          devDependencies: true          
        }
      }
    }
...

index.html

...

<!-- bower:js -->
<!-- endbower -->

<!-- bower:css -->
<!-- endbower -->

...

因此，我没有包含 jquery、angular、bootsrap 和 css 的 bootstrap 脚本。但也包括了一些其他来源。

问题不在main属性里面bower.jsonas

经过一些调查，我发现 issue 和 bootstrap 3.3.x

但是 "overrides" 块在我的 bower.js 中没有帮助。

有一件事好像很有意思：(bootstarp也一样)

添加后

"jquery": {
      "main": "D:/REPO/XX/current/bower_components/jquery/dist/jquery.js"
    }

到 overrides 块，wiredep 包含以下到 index.html

<script src="../bower_components/jquery/D:/REPO/XX/current/bower_components/jquery/dist/jquery.js"></script>

但是当我写了"main": "dist/jquery.js"它就被忽略了

Answer 1

在我看来，您的项目结构存在一些问题。使用 cwd 参数。我已成功配置 wiredep 以使用 config:

添加所需的依赖项

wiredep: {
    task: {
        src: [
            '<%= cfg.webapp_dir %>/index.html'
        ],
        cwd: '.',
        overrides': {
            'bootstrap': {
                'main': ['less/bootstrap.less', 'dist/css/bootstrap.min.css', 'dist/js/bootstrap.min.js']
            }
        },
        fileTypes: {
            html: {
                replace: {
                    js: '<script src="/{{filePath}}"></script>',
                    css: '<link rel="stylesheet" href="/{{filePath}}" />'
                }
            }
        }
    }
}

这还包括 bootstrap overrides，它可以完美地工作 :) 就我而言，bower_dependencies 文件夹与 index.html 位于同一目录中。

Grunt & Bower & grunt-wiredep

Grunt & Bower & grunt-wiredep

gruntjs

bower

grunt-wiredep