Tâche Grunt: Supprimer les lignes entre les marqueurs dans un fichier HTML

En cours de développement, nous testons les fichiers css non mémorisés. Lors de la construction, nous les comprimes et les combinons. J'aimerais ensuite supprimer les éléments de link css non compressés entre les deux premiers commentaires et décommenter le link vers le fichier combined.min.css combiné.min.css. Des idées!

 <!-- __css --> <link rel="stylesheet" href="css/reset.css" /> <link rel="stylesheet" href="css/base.css" /> <!-- css__ --> <!-- __cssmin <link rel="stylesheet" href="css/combined.min.css" /> cssmin__ --> 

Merci!

Vous ne mentionnez pas comment vous faites votre création (normalement, cela serait combiné comme dans la tâche par défaut dans Gruntfile ci-dessous), mais si tout ce dont vous avez besoin, c'est de changer les références individuelles à un seul lien vers le fichier minifié, c'est simple Avoir grunt-usemin faire le travail – voir la tâche de remplacement dans le Gruntfile.

HTML

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>usemin</title> <!-- build:css css/combined.min.css --> <link rel="stylesheet" href="css/reset.css" /> <link rel="stylesheet" href="css/base.css" /> <!-- endbuild --> </head> <body> <h1>usemin</h1> </body> </html> 

Gruntfile

 module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), copy: { dist: { files: [ {src: 'index.html', dest: 'dist/index.html'} ] } }, 'useminPrepare': { options: { dest: 'dist' }, html: 'index.html' }, usemin: { html: ['dist/index.html'] } }); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-copy'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-usemin'); grunt.registerTask('default', ['useminPrepare', 'copy', 'concat', 'cssmin', 'usemin']); grunt.registerTask('replace', ['copy', 'usemin']); }; 

HTML résultant

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>usemin</title> <link rel="stylesheet" href="css/combined.min.css"> </head> <body> <h1>usemin</h1> </body> </html> 

Je pense que l'approche correcte ici est d'avoir deux fichiers html. Un qui utilise la version minifiée et d'autres qui utilisent le CSS normal. Vous pouvez avoir index.html contenant combined.min.css et dev.index.html ayant les autres fichiers. Si vous utilisez grunt pour modifier le html, vous avez besoin d'un autre mécanisme pour renvoyer cette opération et laisser le fichier à l'état d'origine. Cela conduit à générer deux fichiers différents.

Si cela ne fonctionne pas, vous pouvez créer une nouvelle tâche grunt personnalisée qui lit le contenu du fichier, supprime le css original et les remplace par la version minifiée:

 var fileContent = '\ ...\ <!-- __css -->\ <link rel="stylesheet" href="css/reset.css" />\ <link rel="stylesheet" href="css/base.css" />\ <!-- css__ -->\ ...\ '; var minified = '<link rel="stylesheet" href="css/combined.min.css" />'; var part1 = fileContent.split("<!-- __css -->"); var part2 = part1[1].split("<!-- css__ -->"); var result = part1[0] + minified + part2[1]; console.log(result); 

Le code ci-dessus produit:

 ...<link rel="stylesheet" href="css/combined.min.css" />... 

JSfiddle http://jsfiddle.net/krasimir/WL3bZ/