我应该如何配置grunt-usemin来处理相对路径 [英] How should I configure grunt-usemin to work with relative path

问题描述

我有一个由一个yeoman生成器支持的grunt项目，它是基于 generator-webapp ，如果有任何帮助，可以在 GitHub

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

我的项目涉及构建多语言网站，并保持干净，我已决定把所有用一种语言写成的页面放在文件夹名称中，后面是该语言的两个字母的简码。

  |项目/ 
 | --dist / 
 | ---- zh / 
 | ------ index.html 
 | ------ 404.html 
 | ------... 
 | ---- fr / 
 | ------ index.html 
 | ------ ------ 404.html 
 | ------... 
  

从句柄模板开始并使用 assemble 进行处理。在布局中，我为 usemin 构建块，比如

 <！ -  build：css（.tmp）styles / main.css  - > 
< link rel =stylesheethref =../ styles / main.css> 
<！ -  endbuild  - > 
<！ -  build：js scripts / vendor / modernizr.js  - > 
< script src =../ bower_components / modernizr / modernizr.js>< / script> 
<！ -  endbuild  - > 
  

在一个完美的世界中，它将转化为

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


而不是显示

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

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

$ b

  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 =stylesheethref =../ styles / main.css> 
<！ -  endbuild  - > 
<！ -  build：js ../scripts/vendor/modernizr.js  - > 
< script src =../ bower_components / modernizr / modernizr.js>< / script> 
<！ -  endbuild  - > 
  

但不幸的是无法获得正确的输出。

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

  |项目/ 
 | --app / 
 | --dist / 
 | --styles / 
 | --scripts / 
  

而非

  |项目/ 
 | --app / 
 | --dist / 
 | ----样式/ 
 | ----脚本/ 
  

有人会知道该怎么做吗？这似乎是一个相当简单的用例，但我无法通过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 ='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：{
选项：{
 dirs：['<％= yeoman.dist％> /']，
 blockReplacements：{
 css：function（block）{
 return'< link rel =stylesheethref =../'+ 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文件。

I have a grunt project backed by a yeoman-generator that I've built based on the generator-webapp, if it's of any help, you can find it on GitHub

The grunt project makes us of the grunt-usemin task.

My project involve building a multilingual website, and to keep things clean, I've decided to put all the pages written in a language in a folder name after the 2-letter shortcode of the said language.

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

The files are made from handlebars templates and processed with assemble. In the layout I have building blocks for usemin such as

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

Which, in a perfect world would translate to

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

but instead shows

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

which is less than ideal in my case. The relevant part of the Gruntfile.js looks like this

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

I have tried to use the basedir option by setting it to <%= yeoman.dist %> as well as changing the build blocks to

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

But unfortunately wasn't able to get a proper output.

More specifically, the first one didn't change anything, the second one had the folders scripts and styles outputted one level too high in the hierarchy

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

instead of

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

Would anyone happen to know what to do ? It seems a rather simple usecase but I couldn't find the help I need via Google, GitHub or SO...

解决方案

I believe that you can achieve what you need in this way:

Html file:

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

The key solution is in the blockReplacements option of the usemin task. Basically, the task will put your files under <%= yeoman.dist %>/styles/main.css, while your html will be under <%= yeoman.dist %>/en/somefileinEnglish.html and every instance of 'styles/main.css' in this file will be replaced with '../styles/main.css', adding the correct relative path.

As an extra tip, if you are building a multilingual website, you may want to consider grunt-i18n to translate your file while building, so you won't need to maintain a different html file for every language.

这篇关于我应该如何配置grunt-usemin来处理相对路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！