html - yeoman webapp 子文件夹错误的 css 路径

Question

我正在使用 yeoman webapp 生成器 (0.5.0)，我的应用程序目录如下所示:

app/
├── dir1
│   └── index.html
├── favicon.ico
├── images
├── index.html
├── robots.txt
├── scripts
│   └── main.js
└── styles
    └── main.css

在dir1/index.html中，我刚刚复制了app/index.html的内容，并修改了css和js文件的路径。例如来自

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="styles/main.css">

到

<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="../styles/main.css">

使用 grunt serve 一切正常，但是当我使用 grunt build 构建时，dir1/index.html 中的路径是错误的。从 chrome 开发者控制台我可以看到一些错误:

GET http://127.0.0.1/webapp/dir1/styles/9c307a9d.vendor.css        127.0.0.1/:1
GET http://127.0.0.1/webapp/dir1/styles/84f823a4.main.css          127.0.0.1/:1
GET http://127.0.0.1/webapp/dir1/scripts/db02b173.vendor.js           (index):3
GET http://127.0.0.1/webapp/dir1/scripts/cb7562c6.plugins.js          (index):8
GET http://127.0.0.1/webapp/dir1/scripts/b6c3df09.main.js             (index):8

正确的路径应该是:

http://127.0.0.1/webapp/styles/9c307a9d.vendor.css
http://127.0.0.1/webapp/styles/84f823a4.main.css
http://127.0.0.1/webapp/scripts/db02b173.vendor.js
http://127.0.0.1/webapp/scripts/cb7562c6.plugins.js
http://127.0.0.1/webapp/scripts/b6c3df09.main.js

问题是某些 grunt 任务使用 dir1 作为根目录而不是父目录。

我该如何解决这个问题？

Answer 1

我已经找到解决方法了!在 dir1/index.html 中，我不仅要更改外部文件(css、js)的相对路径，还要更改 grunt block ，例如代码:

<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->

应该修改为:

<!-- build:css(.) ../styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) ../styles/main.css -->
<link rel="stylesheet" href="../styles/main.css">
<!-- endbuild -->