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

Question

在旧版本的cssmin中，可以创建不同的目标文件。我缩小了一个style.min.css和一个fold.min.css。现在我更新到了更新版本的nodejs，npm，grunt和cssmin，并且不可能再缩小到不同的输出文件。由于update 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文件后，并生成above-the-fold.min.css之前。要做到这一点，你可以按如下所示注册你的任务：

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

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