我应该如何配置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屋!