Grunt任务:删除HTML文件中标记之间的行

Question

Grunt任务:删除HTML文件中标记之间的行

Tim*_*Tim 3 javascript build node.js gruntjs

在开发中,我们测试未经编译的css文件.在构建时,我们压缩并组合它们.我想link在前两个注释之间删除未压缩的css 元素,并取消注释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__ -->

Run Code Online (Sandbox Code Playgroud)

谢谢!

Answer 1

ste*_*eax 5

你没有提到你是如何进行构建的(通常这可以像下面Gruntfile中的默认任务一样组合),但是如果您只需要将单个链接的单个引用更改为缩小文件,那么它很简单让grunt-usemin完成工作 - 查看Gruntfile中的replace任务.

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>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

结果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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，3 月前
查看次数：	1879 次
最近记录：	12 年，2 月前