grunt cssmin for style.min.css和fort the fort.min.css的不同目标文件

Question

在CSSMIN的较旧版本中，可以创建到不同的目标文件。我缩小了style.min.css和一个上面的fort.min.css。现在，我更新到了Nodejs，NPM，Grunt和CSSMIN的较新版本，并且不可能再将其缩小到不同的输出文件。由于更新只能减小第二个任务并跳过第一个任务。您是否有提示我可以缩小这两个任务？

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将允许在单个任务中定义多个目标。例如：

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']
        }
      }
    }
    // ...
  });
  // ...
};

在cssmin任务中，每个目标名称都应该是唯一的。例如：targetA和targetB

当您在帖子中包含了penthouse任务时，我想您需要在生成style.min.css文件后运行，然后在生成above-the-fold.min.css之前。为此，您可以按以下方式注册您的任务：

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

NOTE ：使用半颜色符号，即cssmin:targetA和cssmin:targetB。这简单地确保cssmin任务的targetA是在penthouse任务之前运行的。随后（penthouse完成完成时），运行cssmin任务的targetB。