Задача Grunt: удалить строки между маркерами в файле HTML

В процессе разработки мы тестируем унифицированные файлы css. При сборке сжимаем и комбинируем их. Затем я хотел бы удалить несжатые элементы 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__ -->

Спасибо!


build node.js javascript gruntjs
person Tim    schedule 01.10.2013    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Вы не упоминаете, как вы делаете свою сборку (обычно все это будет объединено, как в задаче по умолчанию в 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>
person steveax    schedule 02.10.2013
comment
Именно то, что я искал. Спасибо! - person Tim; 07.10.2013

arrow_upward
0
arrow_downward

Я думаю, что правильный подход здесь - иметь два html файла. Один использует уменьшенную версию, а другой - обычный CSS. У вас может быть index.html, содержащий комбинированный.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/

person Krasimir    schedule 01.10.2013
comment
Мы копируем файл в каталог dist в процессе сборки, поэтому мы не манипулируем исходным html. И я хочу избежать необходимости поддерживать два практически идентичных файла html. - person Tim; 01.10.2013