Gulp复制HTML并粘贴到不同的文件

Question

是否可以使用Gulp复制HTML的一部分(而不是整个文件)并将其注入不同的文件？

我找到了像https://www.npmjs.com/package/gulp-html-replace这样的软件包

和https://www.npmjs.com/package/gulp-inject-string

但他们实际上无法复制HTML.

Answer 1

从来不建议使用正则表达式处理HTML，并且有很多反对的理由（1、2、3 ）。

处理 HTML 源文件最流行、最可靠的方法是构建源文件的文档模型。JSDOM是一个 Node.js 模块，它提供了一个很好的 DOM 构建 API。以下是如何使用 JSDOM 解决您的案例的演示：

var fs = require("fs");
var gulp = require("gulp");

var dom = require("jsdom");
var domSerialiser = dom.serializeDocument;

var input = "input.html";
var output = "output.html";

gulp.task("copy-html", function () {
    var extractionPoint = "#extraction-location";
    var insertionPoint = "#insertion-location";

    extractFrom(input, extractionPoint).
            then(insertInto.bind(null, output, insertionPoint)).
            then(saveOutput);
});

function extractFrom(file, section) {
    return new Promise(function (resolve, reject) {
        dom.env({
            file: file,
            done: function (error, window) {
                var portion;

                if (error) {
                    reject(error);
                    return;
                }

                portion = window.document.querySelector(section);

                resolve(portion.outerHTML);
            }
        });
    });
}

function insertInto(file, section, portion) {
    return new Promise(function (resolve, reject) {
        dom.env({
            file: file,
            done: function (error, window) {
                if (error) {
                    reject(error);
                    return;
                }

                section = window.document.querySelector(section);
                // you may prefer to appendChild() instead, your call
                section.outerHTML = portion;

                resolve(domSerialiser(window.document));
            }
        });
    });
}

function saveOutput(data) {
    fs.writeFile(output, data, function (error) {
        if (error) {
            throw error;
        }

        console.log("Copied portion to output successfully.");
    });
}

我希望上面的示例为您提供一个良好的基础，以找到针对您的问题的解决方案。