@lernetz/gulp-typescript-template

HTML Templates to Typescript

This Gulp plugin converts HTML files with template definitions into TypeScript modules.

With the preprocessing step, plain HTML templates can be used in TypeScript as regular imports. It reads files with the following structure:

<template name="app.dashboard">
  <div class="app-dashboard">
    <h1>My Dashboard</h1>
    <p>[[ number ]] new messages</p>
  </div>
</template>
<template name="ui.tooltip">
  <div class="tooltip">
    My Tooltip
  </div>
</template>

And outputs the templates with their names into namespaced TypeScript modules:

// app.ts
export const dashboard = '<div class="app-dashboard"><h1>My Dashboard</h1><p>[[ number ]] new messages</p></div>';

// ui.ts
export const tooltip = '<div class="tooltip">My Tooltip</div>';

Now the templates can be imported as regular strings:

import { dashboard } from './templates/app';
import { tooltip } from './templates/ui';

Usage

An example usage with Gulp:

var gulp     = require('gulp');
var template = require('@lernetz/gulp-typescript-template');

gulp.task('template', function() {
    return gulp.src( 'src/**.html' )
               .pipe( template() )
               .pipe( gulp.dest( 'src/templates' ) );
});