I am using Grunt usemin and useminPrepare for CSS, how can I add a minify step?

131 Views Asked by At

The following is my useminPrepare snippet, is there a way to add a minify step here to the css, I am trying to avoid another grunt plugin if possible...but am open to all answers.

    useminPrepare:{
        html: './public/index.html',
        options:{
            dest: './public',
            flow:{
                html:{
                    steps:{
                        js: ['concat', 'uglifyjs'],
                        css: ['concat']
                    },
                    post:{}
                }
            }
        }
    }
2

There are 2 best solutions below

0
Stradosphere On BEST ANSWER

I ended up having to install grunt-contrib-cssmin and add it to the grunt.loadNpmTasks list. I also needed to add the cssmin section to the grunt file and reference the cssmin in useminPrepare task. This is documented below:

cssmin: {
    target: {
        files: {
          './public/style-min.css': ['./public/style.css']
        }
    }
},

useminPrepare:{
    html: './public/index.html',
    options:{
        dest: './public',
        flow:{
            html:{
                steps:{
                    js: ['concat', 'uglifyjs'],
                    css: ['concat', 'cssmin']
                },
                post:{}
            }
        }
    }
}
1
muecas On

As described in the docs you should add cssmin to your css step configration:

css : ['concat', 'cssmin']

Hope it helps.