javascriptgruntjsgrunt-contrib-sass

grunt + sass: output 2 css files at the same time


I would like to have grunt compile a compact and a compressed version of my sass. I can get it to compile one or the other but not both at the same time. I have tried:

sass: {
        dist: {
            options: {
                style: 'compressed'
            },
            files: {
                'style.min.css': 'css/main.scss',
            }
        }
    },

    sass: {
        dist: {
            options: {
                style: 'compact'
            },
            files: {
                'style.css': 'css/main.scss',
            }
        }
    }

and also:

sass: {
        dist: {
            options: {
                style: 'compressed'
            },
            files: {
                'style.min.css': 'css/main.scss',
            }
        },
        dist: {
            options: {
                style: 'compact'
            },
            files: {
                'style.css': 'css/main.scss',
            }
        }
    }

But neither has worked. What's the solution?


Solution

  • Take a look at the approach I take in my projects, I could be dead wrong about it but I have similar intention as to create one file for readability and other for minification purposes.

    sass: {
      appStyles: {options: {style: 'expanded', sourcemap: 'none'}, files: {'styles/app.css': 'styles/app/main.scss'}},
      appStylesMinified: {options: {style: 'compressed', sourcemap: 'none'}, files: {'styles/app.min.css': 'styles/app.css'}}
    }
    

    Notice that the style that I have chosen for both appStyles and appStylesMinified are expanded and compressed respectively. Also, the compressed version takes the newly created app.css file instead of main.scss to further create app.min.css.

    I find this app.css a little useful in debugging as well when I am still in development mode. But of course, when everything is production ready, app.min.css takes it from there.