如何使用grunt-usemin处理CSS中的绝对URL

Question

我将使用grunt-usemin构建一个应用程序项目

CSS使用绝对路径链接：

  <!-- build:css(.) /app/css/libs.css -->
  <link rel="stylesheet" href="/app-dev/lib/css/style.css"/>
  <link rel="stylesheet" href="/app-dev/lib/css/another.css">
  <!-- endbuild -->

JavaScript文件用相对路径链接：

  <!-- build:js js/app.js -->
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <!-- endbuild -->

Grunt 配置：

  useminPrepare: {
        html: 'app-dev/index.html',
        options: {
              dest: 'app'
        }
  },
  usemin: {
        html: ['app/{,*/}*.html'],
        css: ['app/css/{,*/}*.css'],
        options: {
              assetsDirs: ['app']
        }
  }

问题在于css输出中有一个多余的子文件夹级别：

app
- app
- - css
- - - libs.css
- js
- - app.js
- etc

虽然输出的HTML文件中的引用是正确的

<link rel="stylesheet" href="/app/css/libs.css">

如何将CSS输出到正确的文件夹层次结构中？

- François Romain

---

目前，我使用contrib-copy添加了两个hacky任务来复制文件，并使用contrib-clean删除旧文件夹... - François Romain

如果将 <!-- build:css(.) /app/css/libs.css --> 更改为 <!-- build:css(.) css/libs.css -->，这个问题会自行解决吗？否则，我建议您将 globbing 模式从 {,/} 更改为 **/*。 - Scottux

Answer 1

尝试移除构建路径前面的 /

<!-- build:css app/css/libs.css -->
<link rel="stylesheet" href="/app-dev/lib/css/style.css"/>
<link rel="stylesheet" href="/app-dev/lib/css/another.css">
<!-- endbuild -->

- xphong

Answer 2

HTML文件也应该在“app”文件夹下，这样你就可以删除“/app-dev”了。

- Thomas Decaux