gulp-inject-html-template

Inject html template into innerHTML

Usage no npm install needed!

<script type="module">
  import gulpInjectHtmlTemplate from 'https://cdn.skypack.dev/gulp-inject-html-template';
</script>

README

gulp-inject-html-template Build Status

Inject html template into innerHTML

Install

$ npm install --save-dev gulp-inject-html-template

Usage

File to inject template in

Add the // @template comment to your element, the comment will be replaced by the template's content

class SomeElement extends HTMLElement {
    constructor() {
        super();
        // @template
    }
}

Template to inject

<template>
    <h1>hello world</h1>
</template>

Usage in gulpfile

const gulp = require('gulp');
const injectTemplate = require('gulp-inject-html-template');

// Inject html template into custom-element
// inject-template searches in the same directory for a matching template.html file
// in this case some-element.html
gulp.task('default', () => {
    gulp.src('src/some-element.js')
        .pipe(injectTemplate())
        .pipe(gulp.dest('dist'))
);

TODO

  • Add all inject-template options
  • Support template id's (<template id="some-element">)
  • Add documentation for the new templatePath option

License

MIT © Glenn Vandeuren