微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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文件

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐