Question

在较旧版本的cssmin中，可以创建不同的目标文件。我缩小了style.min.css和一个在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任务一样，我想您需要在生成style.min.css文件后运行，并在之前运行 / em>生成above-the-fold.min.css。为此，您可以按如下方式注册您的任务：

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

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

grunt cssmin为style.min.css和above-the-fold.min.css提供了不同的目标文件

1 个答案: