发表新帖
发表新帖

Grunt task: Delete lines between markers in an HTML file

后端 未结
关注
2 2032
陌清茗
陌清茗 2021-01-21 07:20

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 f

相关标签:
2条回答
  • 被撕碎了的回忆
    2021-01-21 08:02

    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>
    0 讨论(0)
  • 滥情空心
    2021-01-21 08:07

    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/

    0 讨论(0)
 看不清?
提交回复
热议问题