style.min.css 及以上 fold.min.css 的 grunt cssmin 不同目标文件

Question

在旧版本的 cssmin 中，可以创建不同的目标文件。我缩小了一个 style.min.css 和一个 above-the-fold.min.css。现在我更新到更新版本的 nodejs、npm、grunt 和 cssmin，并且不可能再缩小到不同的输出文件。由于更新 grunt 仅缩小第二个任务并跳过第一个任务。你有什么提示可以让我缩小这两个任务吗？

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 任务包含在 post 中，我猜您需要运行在生成style.min.css 文件，在生成 above-the-fold.min.css 之前。为此，您可以按如下方式注册您的任务：

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

注意：分号的使用，即cssmin:targetA和cssmin:targetB。这只是确保 cssmin 任务的 targetA 在 penthouse 任务之前是运行。随后，（当 penthouse 任务完成时），cssmin 任务的 targetB 为运行。

style.min.css 及以上 fold.min.css 的 grunt cssmin 不同目标文件

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

node.js

gruntjs

grunt-contrib-cssmin