grunt cssmin différents fichiers cible pour style.min.css et above-the-fold.min.css

Question

Dans une ancienne version de cssmin, il était possible de créer différents fichiers cibles. J'ai réduit un fichier style.min.css et un fichier above-the-fold.min.css. Maintenant, j'ai mis à jour vers une version plus récente de nodejs, npm, grunt et cssmin et il n'est plus possible de réduire la taille à différents fichiers de sortie. Puisque le grognement de mise à jour ne minimise que la seconde tâche et ignore la première tâche. Avez-vous un indice pour moi de réduire les deux tâches?

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 permettra de définir plusieurs cibles en une seule tâche. Par exemple:

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'] 
     } 
     } 
    } 
    // ... 
    }); 

    // ... 
}; 

Chaque nom cible doit être unique dans le cssmin tâche. Par exemple: targetA et targetB

Comme vous l'avez inclus le penthouse Tâche dans votre post, je suppose que vous devez exécuter ce après la génération du fichier style.min.css et avant générer le above-the-fold.min.css. Pour ce faire, vous pouvez enregistrer vos tâches comme suit:

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

Remarque: L'utilisation de la notation point-virgule, à savoir cssmin:targetA et cssmin:targetB. Cela garantit simplement que targetA de la tâche cssmin est exécuté avant la tâche penthouse. Par la suite, (lorsque la tâche penthouse est terminée), targetB de la tâche cssmin est exécuté.