gruntjs - 如何在HTML文件中列出这些文件名的文件名和数据属性？

Question

我正在创建大量HTML文件，这些文件将用作开发项目的设计指南。 HTML文件将包含以下HTML标记：

<title> Design pattern 001 </title>
<meta data-details="This design should show the basic homepage" />
<meta data-status="Approved" />

所有这些文件都位于目录中：

/designs/design-pattern-001.html    
...
/designs/design-pattern-100.html

我想运行一个grunt任务，它将使用以下语法创建一个单独的index.html：

<table>
  <tr>
    <td> Aprooved</td>
    <td> Design pattern 001 </td>
    <td> This design should show the basic homepage </td>
  </tr>
       ....
</table>

我的开发团队将使用index.html

我在这里尝试了解决方案：How do I generate a list of files in html, using a grunt task?但这只能获取文件名，而不是每个HTML中的任何数据属性。

使用jQuery（或JavaScript）的唯一其他解决方案是为每个相应的文件获取此解决方案，例如此处的解决方案：Get HTML code of a local HTML file in Javascript？

Answer 1

这可以通过grunt custom task来完成。我已经使用上面列出的要求建立了example project on github。

我能够使用以下节点模块来完成它：

• xmldom和xpath解析html文件
• pug从模板
创建生成的html

请查看github project，但以下是大部分重要代码：

  

Grunt文件（项目根中的）：

定义自定义任务选项

module.exports = function(grunt) {

    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        parseAndIndexHtmlFiles : {

            options : {
                output: "index.html",
                directoryToParse: "design",
                jadeTemplate: "index.jade",
                parseHtmlTags: ["title"],
                parseAttributes: ["data-details", "data-status"]
            }
        }
    });

    grunt.loadTasks('tasks');

    grunt.registerTask('default', [ "parseAndIndexHtmlFiles" ]);

};

  

自定义任务文件（在项目的任务文件夹中）/tasks/parseDesignHtml.js：

var DOMParser = require('xmldom').DOMParser;
var xpath = require('xpath');
var Promise = require("bluebird");
var pug = require('pug');
var tidy = require('htmltidy').tidy;
var fs = Promise.promisifyAll(require("fs"));

var options, done, globalGrunt = null;
var fileIndex = [];

module.exports = function(grunt) {

    globalGrunt = grunt;
    grunt.registerTask('parseAndIndexHtmlFiles', function () {

        done = this.async();
        options = this.options({
            output : "",
            directoryToParse : "",
            jadeTemplate : "",
            parseHtmlTags : [ ],
            parseAttributes : [ ]
        });

        parseHtmlFiles(options.directoryToParse);
    });
};

function parseHtmlFiles(directory) {


    fs.readdirAsync(directory).map(function (filename) {

        if (filename.match(/.html$/)) {

            return readFile(directory + "/" + filename);
        }

    }).then(function (results) {

        var contents = [];
        for(var i = 0; i < results.length; i++){
            if(results[i]){
                contents.push(results[i]);
            }
        }

        var html = pug.renderFile(options.jadeTemplate , {
            files : contents
        });

        tidy(html, {
            indent: true
        }, function (err, result) {

            if (err) {
                globalGrunt.fail.fatal(err);
            }

            fs.writeFile(options.output, result, function (err) {

                if (err) {
                    globalGrunt.fail.fatal(err);
                }

                done();
            });
        });
    });

}

function readFile(filename) {
    var promise = Promise.pending();

    fs.readFile(filename, function (err, data) {

        if (err) {
            promise.reject(err);
        } else if (data) {
            var doc = new DOMParser().parseFromString(data.toString(), "text/html");
            var params = parseDocument(doc);
            promise.resolve(new IndexedFile(filename, params));
        } else {
            promise.reject("No Data");
        }

    });

    return promise.promise;
}

function parseDocument(doc) {

    var params = {
        tags : {},
        attributes : {}
    };

    options.parseHtmlTags.forEach(function (tag) {

        var tags = doc.getElementsByTagName(tag);
        if (tags.length > 0) {
            params.tags[tag] = tags[0].firstChild.data;
        }
    });

    options.parseAttributes.forEach(function (attrName) {

        var attr = xpath.select("//@" + attrName, doc);
        if (attr.length > 0) {
            params.attributes[attrName] = attr[0].nodeValue;
        }
    });

    return params;
} 


function IndexedFile(path, parameters) {
    this.path = path;
    this.parameters = parameters;
}

  

模板文件（项目根目录中的 ）/index.jade：

doctype html
html(lang="en")
  head
    title="Stackoverflow Question 40011711"
  body
    table
      - files.forEach(function (item) {
        tr
          td
            a(href=item.path)=item.parameters.tags["title"]
          td=item.parameters.attributes["data-status"]
          td=item.parameters.attributes["data-details"]
      - })