gulp-tweakdom

1.1.1 • Public • Published

gulp-tweakdom

Wraps up jsdom in a easy-to-use Gulp API that allows for DOM manipulation. Doesn't run code, load resources etc. Install via NPM or Yarn.

Usage-

const gulp = require('gulp');
const tweakdom = require('gulp-tweakdom');
 
gulp.task('html', function() {
  const mutator = (document, fpath) => {
    const title = document.head.querySelector('title');
    if (title) {
      title.textContent = 'A New Title';
    }
  };
  return gulp.src('*.html')
      .pipe(tweakdom(mutator))
      .pipe(gulp.dest('./dist'));
})

If you return a node from the mutator function, its .innerHTML will be used for output instead of the whole document. This can be useful if you're manipulating a HTML partial, as jsdom will otherwise assume <head>, <body> etc.

For example, to modify this patial-

<div id="foo">
  Test file
</div>

Use a mutator that returns document.body, as jsdom parses the partial there-

function mutator(document) {
  document.getElementById('foo').textContent = 'Hooray, partial';
  return document.body;
}

TODO

  • Don't use jsdom, it's an enormous dependency.

Readme

Keywords

Package Sidebar

Install

npm i gulp-tweakdom

Weekly Downloads

2

Version

1.1.1

License

Apache-2.0

Unpacked Size

15.8 kB

Total Files

5

Last publish

Collaborators

  • samthor