gruntjs - 我应该如何配置grunt-usemin以使用相对路径

我有一个基于 generator-webapp 构建的yeoman生成器支持的grunt项目，如果有帮助，可以在GitHub上找到它

grunt项目使我们完成了 grunt-usemin 任务。

我的项目涉及建立一个多语言的网站，并且为了保持环境整洁，我决定将用某种语言编写的所有页面放在该语言的2个字母的简码之后的文件夹名称中。

| 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找到所需的帮助...

最佳答案

我相信您可以通过这种方式实现您所需要的:

HTML文件:

    <!-- build:css styles/main.css -->
    <link href='../styles/css/style.css' rel='stylesheet' type='text/css'>
    <link href='../styles/css/responsive.css' rel='stylesheet' type='text/css'>

    <link href="../styles/css/skins/welld.css" rel='stylesheet' type='text/css' id="skin-file">
    <!-- endbuild -->

Gruntfile.js

        useminPrepare: {
            options: {
                dest: '<%= yeoman.dist %>/'
            },
            html: ['<%= yeoman.app %>/snippets/head.html','<%= yeoman.app %>/snippets/tail.html']
        },
        usemin: {
            options: {
                dirs: ['<%= yeoman.dist %>/'],
                blockReplacements: {
                    css: function (block) {
                        return '<link rel="stylesheet" href="../' + block.dest + '"/>';
                    },
                    js: function (block) {
                        return '<script src="../' + block.dest + '"></script>';
                    }
                }
            },
            html: ['<%= yeoman.dist %>/{,*/}*.html'],
            css: ['<%= yeoman.dist %>/styles/{,*/}*.css']
        }

关键解决方案在usemin任务的blockReplacements选项中。基本上，该任务会将您的文件放在 / styles / main.css下，而您的html将放在 / en / somefileinEnglish.html和'styles的每个实例下该文件中的/main.css'将替换为'../styles/main.css'，并添加正确的相对路径。

另外，如果要构建多语言网站，则可能需要在构建时考虑使用grunt-i18n来翻译文件，因此您无需为每种语言维护不同的html文件。