JasonHoffmann/gulp-html-to-js

Gulp plugin for converting html templates to JavaScript modules

Description

This is a gulp plugin that converts HTML files into JavaScript modules, ready to be imported with your favourite module loader.

Installation and Usage

In a shell:

npm i --save-dev gulp-html-to-js

In your gulpfile.js:

var htmlToJs = require('gulp-html-to-js');

// Without concatenation.
gulp.task('views:compile', function() {
  return gulp.src('src/html/**/*')
    .pipe(htmlToJs())
    .pipe(gulp.dest('dist'));
});

// With concatenation.
gulp.task('views:compile', function() {
  return gulp.src('src/html/**/*')
    .pipe(htmlToJs({concat: 'views.js'}))
    .pipe(gulp.dest('dist'));
});

Without the concat option, each module exports the template as a string:

<!-- html/index.html -->
<p>Hello world!</p>

'format cjs';
module.exports = '<p>Hello world!</p>';

With concat, files are grouped into one module, where templates are keyed by file paths:

'format cjs';
module.exports = Object.create(null);
module.exports['index.html'] = '<p>Hello world!</p>';

In your app, import the result like so:

import views from 'views';