Grunt 缩小内联 css

Question

有没有专门用于缩小内联的 grunt 插件 css？我正在使用 grunt-critical 来注入内联 css。是否有任何 grunt 插件可以缩小 1 个文件夹中所有 html 文件的内联 css？我试过 grunt-htmlprocessor，它只是为了缩小 html 代码。

Answer 1

看看这个：它会做 grunt-critical 为你做的同样的事情，但也会缩小 CSS before 内联粘贴，因此它将有效地完成您希望它完成的任务：

https://github.com/chyingp/grunt-inline

cssmin

If cssmin is assigned true, .css will be minified before inlined.

Answer 2

您可以编写一个正则表达式来删除 style=" 和 " 之间的所有空格。这需要大量工作，但这是我目前所知道的唯一解决方案。

Answer 3

试试吧！

用法：

cssmin: {
  target: {
    files: [{
      expand: true,
      cwd: 'public/css',
      src: ['*.css', '!*.min.css'],
      dest: 'public/css',
      ext: '.min.css'
    }]
  }
}

https://github.com/gruntjs/grunt-contrib-cssmin

Answer 4

Minify 是一个默认设置为 false 的选项。您可以看到完整的选项列表 here

// example from https://www.npmjs.com/package/grunt-critical

critical: {
    test: {
        options: {
            base: './',
            css: [
                'test/fixture/styles/main.css',
                'test/fixture/styles/bootstrap.css'
            ],
            minify:true,
            width: 320,
            height: 70
        },
        src: 'test/fixture/index.html',
        dest: 'test/generated/index-critical.html'
    }
}

Grunt 缩小内联 css

Grunt minify inline css

javascript

gruntjs