https://github.com/samthor/gulp-tweakdom

DOM manipulation in Gulp
https://github.com/samthor/gulp-tweakdom

dom gulp gulp-plugin

Last synced: 18 days ago
JSON representation

DOM manipulation in Gulp

• Host: GitHub
• URL: https://github.com/samthor/gulp-tweakdom
• Owner: samthor
• License: apache-2.0
• Created: 2017-06-13T13:40:27.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-06-17T03:52:28.000Z (over 6 years ago)
• Last Synced: 2024-12-18T04:48:44.207Z (about 2 months ago)
• Topics: dom, gulp, gulp-plugin
• Language: JavaScript
• Size: 37.1 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# gulp-tweakdom

Wraps up [jsdom](https://github.com/tmpvar/jsdom) in a easy-to-use Gulp API that allows for DOM manipulation.

Doesn't run code, load resources etc.

Install via [NPM](https://www.npmjs.com/package/gulp-tweakdom) or Yarn.

Usage-

```js

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 ``, `` etc.

For example, to modify this patial-

```html



  Test file



```


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

```js

function mutator(document) {

  document.getElementById('foo').textContent = 'Hooray, partial';

  return document.body;

}

```

## TODO

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