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.");
    });
}

我希望上面的示例为您提供一个很好的基础，以便您找到特定于您的问题的解决方案。

Answer 2

是的，每当我想将一些自定义代码注入管道时，我通常会使用through2：

var gulp = require('gulp');
var through2 = require('through2');
var fs = require('fs');

gulp.task('default', function(){
  gulp.src('./recipient.html')
    .pipe(through2.obj(function(file, enc, done){
      fs.readFile('./donor.html', function(err, data){
        if(err) throw "Something went horribly wrong.";
        // extract from data the HTML you want to insert
        var contents = file.contents.toString('utf8');
        // insert HTML into `contents`
        file.contents = new Buffer(contents);
        this.push(file)
        done();
      });
    });
});

这将通过gulp管道收件人html文件，然后读入捐赠者html文件内容。从那里你可以操纵你心中的内容。然后，您只需获取结果，将其放回文件对象中，然后将该吸盘推回gulp管道。

Answer 3

你可以用fs替换它，我不知道它是不是最好的方式，但它对我有用。

  gulp.task('injectHtml', function() {
    return gulp.src('/dir/file_to_inject.html')
      .pipe(replace('<!-- injecthere -->', function() {
        var htmlContent = fs.readFileSync('/home/file_source.html', 'utf8');
        //regex to get the div content
        return htmlContent.match(/<div id="myDiv">(.*?)<\/div>/)[0];
      }))
      .pipe(gulp.dest('/dir'));
  });

file_source.html

<html>
 <div id="myDiv">test div</div>
</html>

file_to_inject.html

<html>
 <!-- injecthere -->
</html>

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

3 个答案: