0

在旧版本的 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']
    }
  }
}
4

1 回答 1

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.cssabove-the-fold.min.css

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

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

于 2017-09-15T15:03:03.133 回答