grunt cssmin different target files for style.min.css and above-the-fold.min.css

Question

In an older version of cssmin it was possible to create to different target files. I minified a style.min.css and an above-the-fold.min.css. Now I updated to a newer version of nodejs, npm, grunt and cssmin and it is not possible to minify to different outputfiles anymore. Since the update grunt only minifies the second task and skip the first task. Do you have a hint for me to minify both tasks?

cssmin: {
  options: {
    mergeIntoShorthands: false,
    roundingPrecision: -1
  },
  target: {
    files: {
      'data/style.min.css': ['a.css', 'b.css', 'c.css', 'd.css', 'e.css', 'f.css', 'g.css']
    }
  }
},


penthouse: {
 extract : {
    outfile : 'data/above-the-fold.temp.css',
    css : './data/style.min.css',
    url : 'http://localhost/',
    width : 1280,
    height : 500
 },
},

cssmin: {
  options: {
    mergeIntoShorthands: false,
    roundingPrecision: -1
  },
  target: {
    files: {
      'data/above-the-fold.min.css': ['data/above-the-fold.temp.css']
    }
  }
}

Answer 1

grunt-contrib-cssmin will allow multiple Targets to be defined in a single Task. For example:

Gruntfile.js

module.exports = function (grunt) {

  grunt.initConfig({ 
    // ...
    cssmin: { // <-- cssmin Task
      options: {
        mergeIntoShorthands: false,
        roundingPrecision: -1
      },
      targetA: { // <-- First target
         files: {
          'data/style.min.css': ['a.css', 'b.css', 'c.css', 'd.css', 'e.css', 'f.css', 'g.css']
        }
      },
      targetB: { // <-- Second target
        files: {
          'data/above-the-fold.min.css': ['data/above-the-fold.temp.css']
        }
      }
    }
    // ...
  });

  // ...
};

Each Target name should be unique within the cssmin Task. For example: targetA and targetB

As you've included the penthouse Task in your post, I guess that you need to run that after generating the style.min.css file, and before generating the above-the-fold.min.css. To do this you can register your Tasks as follows:

grunt.registerTask('default', ['cssmin:targetA', 'penthouse', 'cssmin:targetB',]);

Note: The use of the semi-colon notation, namely cssmin:targetA and cssmin:targetB. This simply ensures that targetA of the cssmin Task is run before the penthouse Task. Subsequently, (when the penthouse Task completes), targetB of the cssmin Task is run.