Precompile AngularJS templates to a JS file with $templateCache.
Install with npm
npm install --save-dev gulp-ng-template
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'
})
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');
}]);
Optional, Type: String
, Default: 'ngTemplates'
.
Name of the AngularJS module.
Optional, Type: Boolean
, Default: false
.
Create an AngularJS module.
Optional, Type: Boolean
, Default: true
.
wrap the code with IIFE.
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.
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');
}])
Optional, Type: String
, Default: 'templates.js'
.
Create a JS file that Joined all template files.
MIT © Teambition