https://github.com/gakimball/vinyl-dom

Vinyl adapter for the DOM.
https://github.com/gakimball/vinyl-dom

dom vinyl

Last synced: 17 days ago
JSON representation

Vinyl adapter for the DOM.

• Host: GitHub
• URL: https://github.com/gakimball/vinyl-dom
• Owner: gakimball
• License: mit
• Created: 2016-02-06T19:24:42.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2016-02-06T19:27:55.000Z (almost 9 years ago)
• Last Synced: 2024-03-15T10:29:24.109Z (11 months ago)
• Topics: dom, vinyl
• Language: JavaScript
• Size: 5.86 KB
• Stars: 2
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vinyl-dom

[Vinyl](https://github.com/gulpjs/vinyl) adapter for DOM nodes. Wait, what?

Works like Gulp/vinyl-fs's `.src()` and `.dest()` functions, but `.src()` takes in the inner HTML of an element (or the value of a form field), and `.dest()` writes stream values to an element.

## Installation

```bash

npm install vinyl-dom --save

```

## Usage

vinyl-dom creates Vinyl files like any other source adapter. The `path` is the ID of the element (if it has one), and `contents` is a buffer of the inner HTML of the element, or the value if it's a form field.

```js

var dom = require('vinyl-dom');

dom.src('#input')

  .pipe(/* Use most Gulp plugins here! */)

  .pipe(dom.dest('#output'));

```

### `src(input)`

Takes a single DOM element and creates a Vinyl file out of its `value` or `innerHTML` property. `input` can be a selector or an HTMLElement. The function uses `.querySelector()`, so only one element is read.

### `dest(output)`

Transfers the contents of the stream into the `value` or `innerHTML` property of the target element. Since `dom.src()` only creates one file in the stream, there's only one value that can be transferred. Like with `.src()`, the `output` parameter can be a selector or an HTMLElement.

`.dest()` is also a passthrough, so you can pipe it to more transforms.