如何使用 Grunt 将 HTML 解析为 DOM

Posted 2023-02-24

【中文标题】如何使用 Grunt 将 HTML 解析为 DOM

【英文标题】：How to parse HTML to DOM with Grunt

【发布时间】：2016-10-25 20:56:28

【问题描述】：

我是 Grunt 的新手，试图找到一种方法来加载多个 html 文件并解析它们以提取一些值。

我尝试使用jQuery.parseHTML、HTMLParser，但两者都没有定义。有没有办法包含 jQuery 或可以解析 HTML 的库？

grunt.config.init(
    concat: 
        options: 
            dest: 'tmp',
            templates: ['public/*.html']
        
    
);

var recursiveConcat = function(source, result)
    grunt.file.expand(source).forEach(function(file)
        var data = grunt.file.read(file);
        // parse html to dom
        result += data;
    );
    return result;
;

【问题讨论】：

Node 不是浏览器，所以它没有window 或document。即使你加载了 jQuery，你仍然没有 DOM 解析器。

相关问题：How do I parse a HTML page with Node.js, Why doesn't node.js have a native DOM?

这与 grunt 具体有什么关系？

【参考方案1】：

Cheerio 是我喜欢使用的 DOM 解析器。我还没有尝试过，但是grunt-dom-massager 允许您在 Gruntfile 中加载 Cheerio。

【参考方案2】：

看起来编写自己的 Grunt 任务非常简单。 示例和演练here 和 here

然后您使用htmlparser 创建一个任务来管理您的流程。

但是，除非您打算重新使用它或将它与其他一些 grunt 任务（如 grunt-watch）配对，否则您可能会发现使用 htmlparser 创建节点脚本更容易