3

在开发中，我们测试未缩小的 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__ -->

谢谢！

4

2 回答 2

5

您没有提及您是如何进行构建的（通常这将像下面 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>

咕噜文件

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>
于 2013-10-02T06:00:56.550 回答
0

我认为这里正确的方法是拥有两个 html 文件。一种使用缩小版，另一种使用普通 CSS。您可能有index.html包含combine.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/

于 2013-10-01T12:55:47.277 回答