我应该如何配置grunt-usemin来处理相对路径

Question

我有一个由我自己构建的yeoman-generator支持的grunt项目generator-webapp,如果有任何帮助,你可以在GitHub上找到它

咕噜咕噜的项目使我们成为了grunt-usemin这项任务.

我的项目涉及建立一个多语言网站,为了保持清洁,我决定将所有用一种语言写成的页面放在文件夹名称之后,用两个字母的短代码表示.

| project/
|--dist/
|----en/
|------index.html
|------404.html
|------...
|----fr/
|------index.html
|------404.html
|------...

这些文件由把手模板制成并使用assemble.在布局中我有usemin像这样的构建块

<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="../styles/main.css">
<!-- endbuild -->
<!-- build:js scripts/vendor/modernizr.js -->
<script src="../bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->

在一个完美的世界中,这将转化为

<link rel="stylesheet" href="../styles/main.css">
<script src="../scripts/vendor/modernizr.js"></script>

而是显示

<link rel="stylesheet" href="styles/main.css">
<script src="scripts/vendor/modernizr.js"></script>

这在我的情况下不太理想.相关部分Gruntfile.js看起来像这样

    useminPrepare: {
        options: {
            dest: '<%= yeoman.dist %>'
        },
        html: [
            '<%= yeoman.app %>/fr/{,*/}*.html',
            '<%= yeoman.app %>/en/{,*/}*.html'
        ]
    },
    usemin: {
        options: {
            dirs: ['<%= yeoman.dist %>']
        },
        html: [
            '<%= yeoman.dist %>/fr/{,*/}*.html',
            '<%= yeoman.dist %>/en/{,*/}*.html'
        ],
        css: ['<%= yeoman.dist %>/styles/{,*/}*.css']
    }

我试图basedir通过设置它<%= yeoman.dist %>以及更改构建块来使用该选项

<!-- build:css(.tmp) ../styles/main.css -->
<link rel="stylesheet" href="../styles/main.css">
<!-- endbuild -->
<!-- build:js ../scripts/vendor/modernizr.js -->
<script src="../bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->

但遗憾的是无法获得正确的输出.

更具体地说,第一个没有改变任何东西,第二个有文件夹,scripts并styles在层次结构中输出一个太高的级别

| project/
|--app/
|--dist/
|--styles/
|--scripts/

代替

| project/
|--app/
|--dist/
|----styles/
|----scripts/

有人会碰巧知道该怎么办吗？它似乎是一个相当简单的用例,但我无法通过Google,GitHub或SO找到我需要的帮助......

Answer 1

我看到了很多关于此的问题，但没有真正的答案。在我的项目中，我已将“dist”文件夹映射到“/static”服务器端。所以我不需要计算index.html中的相对路径。

但问题仍然存在于 usemin

<!-- build:css(.tmp) static/css/main.css -->
<link rel="stylesheet" href="css/main.css">
<!-- endbuild -->

usemin 文件将被写入dist/static/css/main.css

HTML 将显示错误的（但预期的）路径

<link rel="stylesheet" href="static/css/main.css">

我发现的唯一解决方法是不触及 usemin 块，运行 grunt 并手动更新路径。