I've done a fair bit of searching but can't seem to e up with a full answer to this.

I'm using grunt to manage my sass flow and I've been trying to find a way to output multiple css styles from grunt.

For example:

base.scss should have two outputs the first being style.css which has the expanded css style.

The second should be style.min.css which has the pressed css style.

How can I configure my gruntfile to do this for me?

I've done a fair bit of searching but can't seem to e up with a full answer to this.

I'm using grunt to manage my sass flow and I've been trying to find a way to output multiple css styles from grunt.

For example:

base.scss should have two outputs the first being style.css which has the expanded css style.

The second should be style.min.css which has the pressed css style.

How can I configure my gruntfile to do this for me?

• javascript
• css
• sass

3 Answers 3

You can do this by having two configurations, one outputting expanded CSS and the other pressed. Then register your task to run both. Your grunt file should look something like this:

Example

module.exports = function(grunt) {
    'use strict';
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        // Sass
        sass: {
            dev: { // This outputs the expanded css file
                files: {
                    'style.css': 'base.scss'
                }
            },
            prod: { // This outputs the pressed css file
                options: {
                    outputStyle: 'pressed' // Minify output
                },
                files: {
                    'style.min.css': 'base.scss'
                }
            }
        }
    });

    grunt.registerTask('default', ['sass:dev', 'sass:prod']); // Task runs both
}

Here is a more plete solution of what belongs in gruntfile.js, improving upon what Colin Bacon has already posted. By default grunt's pkg is already set to read package.json in the current directory, so no need to write that. You just need to install the jit-grunt plugin (besides the watch and sass plugins of course) to get my answer working.

module.exports = function(grunt) {
require('jit-grunt')(grunt);

grunt.initConfig({
  sass: {
      expanded: {                         // Target
        options: {                       // Target options
          style: 'expanded'
        },
        files: {                         // Dictionary of files
          'style.css': 'style.scss'       // 'destination': 'source'
        }
      },
      pressed: {                         // Target
        options: {                       // Target options
          style: 'pressed'
        },
        files: {                         // Dictionary of files
          'style.min.css': 'style.scss'  // 'destination': 'source'
        }
      }
  },
  watch: {
    styles: {
      files: ['**/*.scss'], // which files to watch
      tasks: ['sass'],
      options: {
        spawn: false // speeds up watch reaction
      }
    }
  }
});

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

Just add a new manifest file in your styles folder. For example, you have normally main.scss, if you create main2.scss and import some files in there. It will create a file for each manifest file you have.

If your sass task looks something like this (default yeoman webapp generator):

sass: {
  options: {
    sourceMap: true,
    includePaths: ['bower_ponents']
    },
  dist: {
    files: [{
      expand: true,
      cwd: '<%= config.app %>/styles',
      src: ['*.{scss,sass}'],
      dest: '.tmp/styles',
      ext: '.css'
    }]
  },
  server: {
    files: [{
      expand: true,
      cwd: '<%= config.app %>/styles',
      src: ['*.{scss,sass}'],
      dest: '.tmp/styles',
      ext: '.css'
    }]
  }
}

The file section sass read all .scss/.sass files and copy those to .tmp/styles. Later, copy task move those to dist/styles.