grunt cssmin style.min.cssとfold.min.cssの異なるターゲットファイル

Question

旧バージョンのcssminでは、異なるターゲットファイルを作成することができました。私はstyle.min.cssとfold.min.cssの上に縮小しました。今度はnodejs、npm、grunt、cssminの新しいバージョンにアップデートしました。これはもはや別の出力ファイルに縮小することはできません。アップデート・グラントは2番目のタスクのみを縮小し、最初のタスクをスキップするためです。あなたは両方の仕事を縮小するためのヒントを持っていますか？

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では、1つのタスクで複数のターゲットを定義できます。たとえば：

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と、あなたの投稿でpenthouseタスクが含まれてきたようにtargetB

は、私はあなたが後style.min.cssファイルを生成することを実行する必要があることを推測し、前above-the-fold.min.cssを生成します。

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

注：セミコロン記法の使用、すなわちcssmin:targetAとcssmin:targetBを次のようにこれを行うには、あなたのタスクを登録することができます。これにより、タスクのtargetAタスクがpenthouseタスクの前に実行されます。その後、penthouseタスクが完了した時点で、cssminタスクのtargetBが実行されます。