Question

好的伙计们，我试图理解这一点，但我找不到任何基本的教程。

我已经解开了，这是我的基本任务

 uncss: {
            dist: {
                src: ['about.htm', 'index.htm'],
                dest: 'css/tidy.css',
                options: {
                    report: 'min' // optional: include to report savings
                }
            }
        }

接下来我有grunt-processhtml，我正在尝试编写一个任务来替换index.htm中的所有css

<link media="all" rel="stylesheet" href="/css/some.css">
<link media="all" rel="stylesheet" href="/css/somemore.css">

并将其转换为

<link media="all" rel="stylesheet" href="/css/tidy.css">

我不知道怎么做，我知道我使用grunt-processhtml像

processhtml: {
  dist: {
    files: {
      'index.html': ['index.html'],
      'about.html': ['about.html']
    }
  }
}

但如何替换所有

<link media="all" rel="stylesheet" href="/css/some.css">
<link media="all" rel="stylesheet" href="/css/somemore.css">

用我的新tidy.css？

请大家，我需要一些基本的帮助。

Answer 1

另一种选择是使用grunt-string-replace。

我将它用于srcset，因为grunt-processhtm无法处理多个sourceset属性。 E.g：

<img srcset="../img/img_one_400.jpg 400w,
  ../img/img_one_600.jpg 600w,
  ../img/img_one_1200.jpg 1200w,
  ../img/img_one_1408.jpg 1408w"
  sizes="100vw"
  src="../img/img_one_1408.jpg"/>

Gruntfile.js中的

配置：

'string-replace': {
        inline: {
            files: {
                'build/pages/': 'build/pages/*.html'
            },
            options: {
                replacements:[
                    {
                        //../img/ -> recources/img/
                        pattern: /\.\.\/img\//g,
                        replacement: 'fileadmin/img/'
                    }
                ]
            }
        }
    }

在你的情况下，它会是这样的：

[...]
            options: {
                replacements:[
                    {
                        pattern: /\/css\/some\.css/g,
                        replacement: '/css/tidy.css'
                    }
                ]
            }
[...]

Answer 2

根据grunt-processhtml，您可以根据环境使用以下内容输出CSS链接。我不确定如何定义环境（查看文档）。

如果它是dist，那么将会创建tidy.css文件并将其链接

<!-- build:template
<% if (environment === 'dev') { %>
<link media="all" rel="stylesheet" href="/css/some.css">
<link media="all" rel="stylesheet" href="/css/somemore.css">
<% } else { %>
<link media="all" rel="stylesheet" href="/css/tidy.css">
<% } %>
/build -->

grunt-processhtml正确使用

2 个答案: