gulp-ng-template

Precompile AngularJS templates to a JS file with $templateCache

Showing:

Popularity

Downloads/wk

691

GitHub Stars

24

Maintenance

Last Commit

3yrs ago

Contributors

5

Package

Dependencies

7

License

Type Definitions

Tree-Shakeable

No?

Categories

Readme

gulp-ng-template

Precompile AngularJS templates to a JS file with $templateCache.

NPM version Build Status

Install

Install with npm

npm install --save-dev gulp-ng-template

Usage

var minifyHtml = require('gulp-minify-html')
var ngTemplate = require('gulp-ng-template')

gulp.task('templates:dist', function() {
  gulp.src('src/tpl/**/*.html')
    .pipe(minifyHtml({empty: true, quotes: true}))
    .pipe(ngTemplate({
      moduleName: 'genTemplates',
      standalone: true,
      filePath: 'js/templates.js'
    }))
    .pipe(gulp.dest('dist'));  // output file: 'dist/js/templates.js'
})

Demo

test/a.html:

<div class="test">A</div>

test/b.html:

<div class="test">
  <span>B</span>
</div>

gulp test:

gulp.task('test', function () {
  return gulp.src(['test/a.html', 'test/b.html'])
    .pipe(ngTemplate({filePath: 'js/tpl.js'}))
    .pipe(gulp.dest('test'));
})

test/js/tpl.js:

'use strict';

angular.module('ngTemplates').run(['$templateCache', function($templateCache) {

  $templateCache.put('a.html', '<div class="test">A</div>\n');

  $templateCache.put('b.html', '<div class="test">\n  <span>B</span>\n</div>\n');

}]);

Options

moduleName

Optional, Type: String, Default: 'ngTemplates'.

Name of the AngularJS module.

standalone

Optional, Type: Boolean, Default: false.

Create an AngularJS module.

wrap

Optional, Type: Boolean, Default: true.

wrap the code with IIFE.

useStrict

Optional, Type: Boolean, Default: true.

'use strict;' will be generated on the top, but if Options.wrap is true, it be generated in the IIFE.

prefix

Optional, Type: String, Default: ''.

Add a prefix to $templateCache's key.

gulp.task('test', function () {
  return gulp.src(['test/a.html', 'test/b.html'])
    .pipe(ngTemplate({
      filePath: 'js/tpl.js',
      prefix: '/app/'
    }))
    .pipe(gulp.dest('test'));
})

test/js/tpl.js:

'use strict';

angular.module('ngTemplates').run(['$templateCache', function($templateCache) {

  $templateCache.put('/app/a.html', '<div class="test">A</div>\n');

  $templateCache.put('/app/b.html', '<div class="test">\n  <span>B</span>\n</div>\n');

}])

filePath

Optional, Type: String, Default: 'templates.js'.

Create a JS file that Joined all template files.

License

MIT © Teambition

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial