7

让我先说两件事。我目前正在使用 grunt 来完成这些任务，而且我也知道 Yeoman 有我想要的东西。我真的很喜欢 Yeoman，但是对于我正在从事的这个特定项目来说，这有点太固执了。

所以我有以下 HTML 文件：

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <!-- START-CSS-MIN:css/build/min.css -->
        <link rel="stylesheet" href="css/bootstrap/bootstrap-2.1.1.css">
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/boilerplate.css">
        <!-- END-CSS-MIN -->

        <!-- START-JS-MIN:js/build/modernizr.js -->
        <script src="js/libraries/modernizr.js"></script>
        <!-- END-JS-MIN -->
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
        <![endif]-->

        <p>Hello world! This is a basline HTML5 template (based on HTML5 Boilerplate).</p>

        <!-- START-JS-MIN:js/build/libraries.js -->
        <script src="js/libraries/underscore.js"></script>
        <script src="js/libraries/jquery/jquery.js"></script>
        <!-- END-JS-MIN -->
    </body>
</html>

现在您可以看到 CSS-MIN 和 JS-MIN 注释。现在我已经有一个自定义的 grunt 构建任务，它可以正确地收集评论中的所有这些文件（使用 htmlparser），然后直接根据评论缩小和连接它们。构建过程的最后一步是创建该 HTML 文件的新版本（用于生产用途），用新文件替换注释。例如，上面的代码会变成这样：

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

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

        <script src="js/build/modernizr.js"></script>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
        <![endif]-->

        <p>Hello world! This is a basline HTML5 template (based on HTML5 Boilerplate).</p>

        <script src="js/build/libraries.js"></script>
    </body>
</html>

我的问题是如何在 NodeJS 中做到这一点？htmlparser NPM 模块非常适合解析 HTML，但是我现在需要一些东西来修改 HTML（在特定位置删除和添加某些元素）。有没有关于如何在 NodeJS 代码中执行此操作的好的包/教程？

4

2 回答 2

3

我不太确定这是否对注释行有帮助，但这应该比 DOM 参考更容易解决。

考虑使用：https ://github.com/tmpvar/jsdom

还有其他选择。（https://github.com/joyent/node/wiki/modules）

于 2013-01-23T17:42:59.783 回答
0

你可以用cheerio

以下代码将准确生成您提供的输出（除了一些小的空白差异）

const $ = require('cheerio').load(inputHtml);

// Returns a filter function that selects the comments with the provided indexes
const commentRemovalFilter = (commentIndexes)=>{
    let commentIndex=-1;
    return (index, node)=>{
        const isComment = node.type === 'comment';
        if(isComment)commentIndex++;
        return isComment && commentIndexes.includes(commentIndex);
    }
}
    

$('head').contents().filter(commentRemovalFilter([0,1,2,3])).remove();
$('head link').remove();
$('head script').remove();

//Cheerio respects whitespace provided here
$('head').append(`
        <link rel="stylesheet" href="css/build/min.css">

        <script src="js/build/modernizr.js"></script>
`)


$('body').contents().filter(commentRemovalFilter([1,2])).remove();
$('body script').remove();
$('body').append(`      <script src="js/build/libraries.js"></script>
`)

console.log($.html())

输出：

<html><head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        
        
        
        
        

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

        <script src="js/build/modernizr.js"></script>
</head>
    <body>
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
        <![endif]-->

        <p>Hello world! This is a basline HTML5 template (based on HTML5 Boilerplate).</p>

        
        
        
        
    
      <script src="js/build/libraries.js"></script>
</body></html>
于 2021-03-18T11:32:36.703 回答