Grunt缩小了内联css

Question

Are there any grunt plugin just for minifying inline css? I am using grunt-critical for injecting inline css. Is there any grunt plugin to minify the inline css of all html files in 1 folder? I have tried grunt-htmlprocessor and it does only to minify the html code.

Answer 1

Take a look at this one: it'll do the same thing grunt-critical is doing for you but will also minify the CSS before pasting it inline, so it will effectively do the task you want it to do:

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

cssmin

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

Answer 2

You could write a regular expression that removes all spaces between style=" and " . It would require a fair amount of work, but it's the only solution I know of at this time.

Answer 3

Try it!

Usage:

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 is an option which is set to false by default. You can see the full list of options 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'
    }
}