Grunt 任务：删除 HTML 文件中标记之间的行答案

【问题标题】：Grunt task: Delete lines between markers in an HTML fileGrunt 任务：删除 HTML 文件中标记之间的行
【发布时间】：2013-10-07 15:13:18
【问题描述】：

在开发中，我们测试未缩小的 css 文件。在构建时，我们压缩并组合它们。然后我想删除前两个 cmets 之间未压缩的 css link 元素，并取消注释 link 到生成的 combined.min.css 文件。任何想法！

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

谢谢！

【问题讨论】：

标签： javascript node.js build gruntjs

【解决方案1】：

你没有提到你是如何进行构建的（通常这会像下面 Gruntfile 中的默认任务一样组合在一起），但如果你需要的只是将单个引用更改为指向缩小的单个链接让grunt-usemin 完成这项工作很简单——请参阅 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

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

我认为这里正确的做法是拥有两个 html 文件。一种使用缩小版，另一种使用普通 CSS。你可能有 index.html 包含 combined.min.css 和 dev.index.html 有其他文件。如果您使用 grunt 更改 html，那么您需要另一种机制来恢复此操作并将文件保留为原始状态。这再次导致生成两个不同的文件。

如果这不起作用，那么您可以创建一个新的自定义 grunt 任务来读取文件的内容，删除原始 css 包含并用缩小版本替换它们：

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

上面的代码产生：

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

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

【讨论】：

我们在构建过程中将文件复制到dist目录中，所以我们不是在操作原始的html。而且我想避免维护两个基本相同的 html 文件。