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

我有一个咕噜的项目，由一个yeoman发电机支持，我建立在 generator-webapp，如果有任何帮助，你可以找到它在 GitHub

咕噜的项目使我们成为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/{,'<%= 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 -->

但不幸的是没有得到正确的输出。

更具体来说，第一个没有改变任何东西，第二个文件夹的脚本和样式在层次结构中输出一个级别太高

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

代替

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

谁会碰巧知道该怎么办？这似乎是一个相当简单的用例，但是我无法通过Google，GitHub或者…找到我需要的帮助

解决方法

我相信你可以这样实现你所需要的：

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']
        }

关键的解决方案是在usemin任务的blockReplacements选项中。基本上，这个任务将把您的文件放在<％= yeoman.dist％> /styles/main.css下，而你的html将位于<％= yeoman.dist％> /en/somefileinEnglish.html和每个该文件中的“styles / main.css”实例将被替换为“../styles/main.css”，添加正确的相对路径。

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