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

Question

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?

You can also use other grunt task just to compress your style as https://github.com/gruntjs/grunt-contrib-cssmin — romuleald, Apr 14 '15 at 13:03

score 1 · Accepted Answer · answered Apr 14 '15 at 10:30

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.

thanks @TahirAhmed, that worked beautifully. I'm new to grunt so I didn't realise you could customise declarations like appStyles (I'm assuming it's custom since I didn't find that in the documentation). Thanks for solving my issue and educating me at the same time! — ric0c, Apr 14 '15 at 10:57
Glad it helped. Yes the declarations `appStyles` and `appStylesMinified` are custom and changeable. You are welcome. — Tahir Ahmed, Apr 14 '15 at 11:01

Kushal · Answer 2 · 2015-04-14T10:10:46.363

0

Why do you want to compact the saas files you can directly use @import in your saas files and your single will be ready and then use compress. Just create something like main.scss and import all the saas files inside it and then compress this fle instead.

Edited:

grunt.initConfig({
  sass: {
    dist: {
      files: {
        'main.css': 'main.scss',
        'main1.css': 'main1.scss'
      }
    }
  }
});

edited Apr 14 '15 at 10:10

answered Apr 14 '15 at 09:56

Kushal

1,360
6
16

Hi @Kushal, thanks for the response. If I may clarify my question, I would like sass to output two css files at once, both a readable css file and and minified css file when I run grunt. I am already doing what you are suggesting using imports in my main scss file. Thanks. – ric0c Apr 14 '15 at 10:07

evolutionxbox · Answer 3 · 2015-04-14T12:50:24.947

I find the following code works just fine. Instead of relying on sass to output multiple files with different compression, I have sass output the compact style and then use grunt-contrib-cssmin to compress the css even further.

module.exports = function(grunt) {

  grunt.initConfig({
    sass: {
      dist: {
        options: {
          style: 'compact'
        },
        files: {
          'style.css': 'css/main.scss',
          'style1.css': 'css/main1.scss',
        }
      }
    },
    cssmin: {
      dist: {
        files: {
          'style.min.css': ['style.css'],
          'style1.min.css': ['style1.css']
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-cssmin');

  grunt.registerTask('default', ['sass', 'cssmin']);

};

You don't even need the compact option. This would make the output css more easily readable.

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

3 Answers3