gulp-domly

Plugin for gulp 3 to precompile DOMly templates

Usage

Install gulp-domly as a development dependency:

npm install --save-dev gulp-domly

Compiling to a namespace for the browser

gulp-declare can be used to safely declare template namespaces and make templates available for use in the browser.

First, install development dependencies:

npm install --save-dev gulp-handlebars gulp-declare gulp-concat

Given the following directory structure:

├── gulpfile.js               # Your gulpfile
└── source/                   # Your application's source files
    └── templates/            # Templates named with dot notation
        └── app.html          # Delcared as MyApp.templates.app
        └── app.header.html   # Delcared as MyApp.templates.app.header

To compile all templates in source/templates/ to build/js/templates.js under the MyApp.templates namespace:

gulpfile.js

var domly = require('gulp-domly');
var declare = require('gulp-declare');
var concat = require('gulp-concat');
 
gulp.task('templates', function(){
  gulp.src(['source/templates/*.html'])
    .pipe(domly())
    .pipe(declare({
      namespace: 'MyApp.templates',
      noRedeclare: true, // Avoid duplicate declarations
    }))
    .pipe(concat('templates.js'))
    .pipe(gulp.dest('build/js/'));
});

The template's filename is combined with the namespace, so the resulting build/js/templates.js would look like:

this["MyApp"] = this["MyApp"] || {};
this["MyApp"]["templates"] = this["MyApp"]["templates"] || {};
this["MyApp"]["templates"]["app"] = function() { /* compiled */ };
this["MyApp"]["templates"]["app"] = this["MyApp"]["templates"]["app"] || {};
this["MyApp"]["templates"]["app"]["header"] = function() { /* compiled */ };

You can then use your templates:

document.body.appendChild(MyApp.templates.app(data));

Compiling to various module systems

See the gulp-define-module documentation for details on how to define templates as AMD, Node, CommonJS, and hybrid modules.

First, install development dependencies:

npm install --save-dev gulp-handlebars gulp-define-module

To compile all templates in source/templates/ to build/js/templates/ as separate modules:

gulpfile.js

var domly = require('gulp-domly');
var defineModule = require('gulp-define-module');
 
gulp.task('templates', function(){
  gulp.src(['source/templates/*.html'])
    .pipe(domly())
    .pipe(defineModule('amd'))
    .pipe(gulp.dest('build/js/templates/'));
});

Passing compiler options

You can pass any compiler options accepted by domly.precompile():

gulpfile.js

gulp.task('templates', function(){
  gulp.src(['source/templates/*.html'])
    .pipe(domly({
      compilerOptions: {
        stripWhitespace: true,
        preserveComments: true
      }  
    }))
    .pipe(defineModule('amd'))
    .pipe(gulp.dest('build/js/templates/'));
});

Compiling using a specific DOMly version

You can use different versions of DOMly by specifying the version in your package.json and passing it as options.domly:

package.json

{
  "devDependencies": {
    "domly": "^0.0.7"
  }
}

gulpfile.js

gulp.task('templates', function(){
  gulp.src('source/templates/*.html')
    .pipe(domly({
      domly: require('domly')
    }))
    .pipe(defineModule('amd'))
    .pipe(gulp.dest('build/js/templates/'));
});

API

domly(options)

options.compilerOptions

Type: Object

Compiler options to pass to domly.precompile().

options.domly

Type: Object

DOMly library to use for precompilation. By default, the latest stable version of DOMly is used.