3

我在我的角度应用程序中使用 html5mode，但是当我运行bower install时grunt，它会将路径呈现为

<script src="bower_components/...

我可以将其更改为

<script src="/bower_components/...?

我在<base href="/">我的部分中添加了一个标签<head/>，但是当我的页面尝试加载 javascript 时，它们仍在寻找相对 url。

/bower_components/script.js因此，对于当前呈现为 的脚本<script src="bower_components/script.js"></script>，

打开时/login，页面会尝试加载/login/bower_components/script.js

编辑 按照@sharpper 的建议，我添加了下面的代码块并在 Gruntfile.js 中结束了这个：

// Automatically inject Bower components into the app
'bower-install': {
  app: {
    html: '<%= yeoman.app %>/index.html',
    ignorePath: '<%= yeoman.app %>/',
    fileTypes: {
      html: {
        block: /(([\s\t]*)<!--\s*bower:*(\S*)\s*-->)(\n|\r|.)*?(<!--\s*endbower\s*-->)/gi,
        detect: {
          js: /<script.*src=['"](.+)['"]>/gi,
          css: /<link.*href=['"](.+)['"]/gi
        },
        replace: {
          js: '<script src="/{{filePath}}"></script>', // <-- Change this line
          css: '<link rel="/stylesheet" href="{{filePath}}" />'
        }
      },
      yml: {
        block: /(([\s\t]*)#\s*bower:*(\S*)\s*)(\n|\r|.)*?(#\s*endbower\s*)/gi,
        detect: {
          js: /-\s(.+)/gi,
          css: /-\s(.+)/gi
        },
        replace: {
          js: '- {{filePath}}',
          css: '- {{filePath}}'
        }
      }
    }
  }
},

它仍然可以正确编译，但文件呈现相同。

4

3 回答 3

11

首先，确保您的凉亭安装在最新版本：v0.8.0（yeoman 目前使用的是 v0.7.0），然后下面的代码应该可以工作：

     'bower-install': {
         app: {
            src: ['<%= yeoman.app %>/index.html'],
            ignorePath: '<%= yeoman.app %>/',
            fileTypes: {
                html: {
                    replace: {
                        js: '<script src="/{{filePath}}"></script>',
                        css: '<link rel="stylesheet" href="/{{filePath}}" />'
                    }
                }
            }
        }
     }

如果您不想更新或此方法不起作用，请尝试以下技巧：更改ignorePath: '<%= yeoman.app %>/',为ignorePath: '<%= yeoman.app %>',，那么它应该可以满足您的目的。

于 2014-01-05T16:01:16.120 回答
1

看起来这是另一个名为bower-install. 您可以在以下位置找到此插件的文档：https ://github.com/stephenplusplus/grunt-bower-install

在引擎盖下它使用了一个名为wiredep的插件，在这里找到：https ://github.com/stephenplusplus/wiredep

看起来您可以将参数传递给wiredep，以更改它插入脚本标签的方式。您可以将 fileTypes 配置参数添加到您的'bower-install'配置并覆盖默认值：

html: {
  block: /(([\s\t]*)<!--\s*bower:*(\S*)\s*-->)(\n|\r|.)*?(<!--\s*endbower\s*-->)/gi
  detect: {
    js: /<script.*src=['"](.+)['"]>/gi,
    css: /<link.*href=['"](.+)['"]/gi
  },
  replace: {
    js: '<script src="{{filePath}}"></script>', // <-- Change this line
    css: '<link rel="stylesheet" href="{{filePath}}" />'
  }
},
yml: {
  block: /(([\s\t]*)#\s*bower:*(\S*)\s*)(\n|\r|.)*?(#\s*endbower\s*)/gi,
  detect: {
    js: /-\s(.+)/gi,
    css: /-\s(.+)/gi
  },
  replace: {
    js: '- {{filePath}}'
    css: '- {{filePath}}'
  }
}

将此添加到您的 grunt 配置中：

'bower-install': {
  ...
  fileTypes: ... above block ...
}

这有点棘手，但我希望一切都有意义。

于 2014-01-03T21:00:33.213 回答
0

@sharpper 和其他提到fileTypes设置工作的答案，但您需要一个 grunt-bower-install 版本，将该设置传递给wiredep。我有 0.7.0 版本，它不尊重该设置。我升级npm install grunt-bower-install到版本 1.3.0 然后设置开始工作。

于 2014-03-26T07:07:35.003 回答