Geek Answers Handbook

Gulp copy HTML and paste to another file

Is it possible to use Gulp to copy part of HTML (and not the whole file) and paste it into another file?

I found packages like https://www.npmjs.com/package/gulp-html-replace

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

but they cannot actually copy the HTML.

+6
source share
3 answers

Regular expression HTML processing is never recommended, and there are many arguments ( 1 , 2 , 3 ).

The most popular and reliable way to process an HTML source is to create a model of the source document. JSDOM is a single node.js module that provides a good DOM API. Here is a demonstration of how to solve your case with 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."); }); }

Hope the above example provides a good basis for resolving your specific issue.

+2
source

Yes, I usually use through2 whenever I want to insert some kind of custom code into a channel:

 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(); }); }); });

This will translate the recipient's html file through gulp and then read into the contents of the donor's html file. From there, you can manipulate your heart content. Then you just take the result, put it back into the object file and insert that suction cup back into the gulp pipeline.

+2
source

you can do it with fs and replace, I don't know if this is the best way, but it works for me.

  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>
+1
source

More articles:


All Articles