Grunt任務：刪除HTML文件中標記之間的線條

在開發中，我們測試了未定義的css文件。在構建時，我們會壓縮併合並它們。我想然後取出未壓縮的CSS link要素的前兩個註釋之間，並取消對link到生成combined.min.css文件。有任何想法嗎！Grunt任務：刪除HTML文件中標記之間的線條

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

謝謝！

來源

2013-10-01 Tim

你不提，你是怎麼做您的構建（通常這都將是COM如下面的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>

來源

2013-10-02 06:00:56 steveax

正是我在找什麼。謝謝！ – Tim

我認爲這裏的正確的做法是有兩個HTML文件。一個使用縮小版本和其他使用普通CSS的其他版本。您可能有index.html包含combined.min.css和dev.index.html具有其他文件。如果您使用grunt來更改html，那麼您需要另一種機制來恢復此操作並將文件保留爲原始狀態。這又導致生成兩個不同的文件。

如果不工作，那麼你可以創建一個新的自定義咕嚕的任務，讀取文件的內容，刪除原始的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-01 12:55:47 Krasimir

我們將文件複製到一個'dist'目錄中生成過程，所以我們不會操縱原始的HTML。我想避免必須維護兩個基本相同的html文件。 – Tim

剛編輯我的答案。 – Krasimir

差的答案，醜陋的語法，而不是* automagic * – mate64

Grunt任務：刪除HTML文件中標記之間的線條

回答

相關問題