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

Question

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

grunt 项目让我们有了 grunt-usemin 任务。

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

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

这些文件是由 Handlebars 模板制作的，并使用 assemble 进行处理。 。在布局中，我有 usemin 的构建 block 比如

<!-- 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 %>以及将构建 block 更改为

<!-- 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

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

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 选项中。基本上，该任务会将您的文件放在 <%= yeoman.dist %>/styles/main.css 下，而您的 html 将放在 <%= yeoman.dist %>/en/somefileinEnglish.html 和“styles”的每个实例下该文件中的“/main.css”将替换为“../styles/main.css”，添加正确的相对路径。

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