gruntjs

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

我想运行一个 g运行t 任务，它将创建一个单独的 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. I've gone ahead and built an example project on github 使用您上面概述的要求来完成。

我能够使用以下节点模块做到这一点：

xmldom and xpath 解析 html 个文件
pug 从模板

请查看 github project 但这里是最重要的代码：

Grunt file ( in root of project ):

定义自定义任务选项

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" ]);

};

Custom task file ( in tasks folder of project ) /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;
}

Template file ( in root of project ) /index.jade:

doctype html
html(lang="en")
  head
    title="Whosebug 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"]
      - })

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

gruntjs - how to list filenames and data attributes of those filenames in an HTML file?

javascript

jquery