Grunt task: Delete lines between markers in an HTML file

问题

In development we test the unminified css files. On build we compress and combine them. I would like to then remove the uncompressed css link elements between the first two comments, and uncomment the link to the generated combined.min.css file. Any ideas!

<!-- __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__ -->

Thanks!

回答1:

You don't mention how you are doing your build (normally this would all be combined like in the default task in the Gruntfile below), but if all you need is to change the individual references to a single link to the minified file it's simple to have grunt-usemin do the work -- see the replace task in the 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']);
};

Resultant HTML

<!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>

回答2:

I think that the correct approach here is to have two html files. One which uses the minified version and other which use the normal CSS. You may have index.html containing combined.min.css and dev.index.html having the other files. If you use grunt to change the html then you need another mechanism to revert this operation and leave the file to the original state. This again leads to generating two different files.

If this doesn't work then you could create a new custom grunt task which reads the content of the file, removes the original css includes and replace them with the minified version:

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);

The code above produces:

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

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

来源：https://stackoverflow.com/questions/19116547/grunt-task-delete-lines-between-markers-in-an-html-file

标签

javascript

node.js

build

gruntjs