gulp-ng-template-strings

Inline angular templates into directive definition objects

Install

npm i --save-dev gulp-ng-template-strings

Example

Pass the plugin js files containing templateUrl properties to have them replaced with template properties.

gulpfile.js

var gulp = require('gulp');
var ngTemplateStrings = require('gulp-ng-template-strings');
 
gulp.task('default', function() {
  return gulp.src('src/**/*.js')
    .pipe(ngTemplateStrings())
    .pipe(gulp.dest('dist'));
});

Input files

src/tab.js

function tabDirective() {
    return {
        templateUrl: 'templates/tab.html'
    };
}

templates/tab.html

<ul>
    <li>Tab</li>
</ul>

Output file

dist/tab.js

function tabDirective() {
    return {
        templateUrl: '<ul><li>Tab</li></ul>'
    };
}

API

All options can be passed on stream creation.

ngTemplateStrings(options)

`cwd`

By default the plugin looks for files based of the file.cwd of each file passed through. This option overrides that for all files passed to a stream.

ngTemplateStrings({cwd: 'root/of/templatesUrls/'})

`minify`

Your html strings will be minified with html-minifier. You can override our default configuration by passing a minify object in the settings object.

ngTemplateStrings({minify: {collapseWhitespace: false}})

By default we use the following options:

{
  removeComments: true, // remove html comments
  removeCommentsFromCDATA: true, // removes comments from inline JS & CSS
  collapseWhitespace: true, // collapse whitespace in text nodes
  caseSensitive: true // preserve case in attributes
  // all other options use html-minifier's default, false.
}

You can also disable minification altogether by passing:

ngTemplateStrings({minify: false})