1 | gulp-ng-template
|
2 | ====
|
3 | Precompile AngularJS templates to a JS file with $templateCache.
|
4 |
|
5 | [![NPM version][npm-image]][npm-url]
|
6 | [![Build Status][travis-image]][travis-url]
|
7 |
|
8 | ## Install
|
9 |
|
10 | Install with [npm](https://npmjs.org/package/gulp-ng-template)
|
11 |
|
12 | ```
|
13 | npm install --save-dev gulp-ng-template
|
14 | ```
|
15 |
|
16 | ## Usage
|
17 |
|
18 | ```js
|
19 | var minifyHtml = require('gulp-minify-html');
|
20 | var ngTemplate = require('gulp-ng-template');
|
21 |
|
22 | gulp.task('templates:dist', function() {
|
23 | gulp.src('src/tpl/**/*.html')
|
24 | .pipe(minifyHtml({empty: true, quotes: true}))
|
25 | .pipe(ngTemplate({
|
26 | moduleName: 'genTemplates',
|
27 | standalone: true,
|
28 | filePath: 'js/templates.js'
|
29 | }))
|
30 | .pipe(gulp.dest('dist')); // output file: 'dist/js/templates.js'
|
31 | });
|
32 | ```
|
33 |
|
34 | ## Demo
|
35 |
|
36 | test/a.html:
|
37 |
|
38 | ```html
|
39 | <div class="test">A</div>
|
40 | ```
|
41 |
|
42 | test/b.html:
|
43 |
|
44 | ```html
|
45 | <div class="test">
|
46 | <span>B</span>
|
47 | </div>
|
48 | ```
|
49 |
|
50 | `gulp test`:
|
51 |
|
52 | ```js
|
53 | gulp.task('test', function () {
|
54 | return gulp.src(['test/a.html', 'test/b.html'])
|
55 | .pipe(ngTemplate({filePath: 'js/tpl.js'}))
|
56 | .pipe(gulp.dest('test'));
|
57 | });
|
58 | ```
|
59 |
|
60 | test/js/tpl.js:
|
61 |
|
62 | ```js
|
63 | 'use strict';
|
64 |
|
65 | angular.module('ngTemplates').run(['$templateCache', function($templateCache) {
|
66 |
|
67 | $templateCache.put('a.html', '<div class="test">A</div>\n');
|
68 |
|
69 | $templateCache.put('b.html', '<div class="test">\n <span>B</span>\n</div>\n');
|
70 |
|
71 | }]);
|
72 | ```
|
73 |
|
74 |
|
75 | ## Options
|
76 |
|
77 | ### moduleName
|
78 |
|
79 | *Optional*, Type: `String`, Default: `'ngTemplates'`.
|
80 |
|
81 | Name of the AngularJS module.
|
82 |
|
83 | ### standalone
|
84 |
|
85 | *Optional*, Type: `Boolean`, Default: `false`.
|
86 |
|
87 | Create an AngularJS module.
|
88 |
|
89 | ### prefix
|
90 |
|
91 | *Optional*, Type: `String`, Default: `''`.
|
92 |
|
93 | Add a prefix to $templateCache's key.
|
94 |
|
95 | ```js
|
96 | gulp.task('test', function () {
|
97 | return gulp.src(['test/a.html', 'test/b.html'])
|
98 | .pipe(ngTemplate({
|
99 | filePath: 'js/tpl.js',
|
100 | prefix: '/app/'
|
101 | }))
|
102 | .pipe(gulp.dest('test'));
|
103 | });
|
104 | ```
|
105 |
|
106 | test/js/tpl.js:
|
107 |
|
108 | ```js
|
109 | 'use strict';
|
110 |
|
111 | angular.module('ngTemplates').run(['$templateCache', function($templateCache) {
|
112 |
|
113 | $templateCache.put('/app/a.html', '<div class="test">A</div>\n');
|
114 |
|
115 | $templateCache.put('/app/b.html', '<div class="test">\n <span>B</span>\n</div>\n');
|
116 |
|
117 | }]);
|
118 | ```
|
119 |
|
120 | ### filePath
|
121 |
|
122 | *Optional*, Type: `String`, Default: `'templates.js'`.
|
123 |
|
124 | Create a JS file that Joined all template files.
|
125 |
|
126 |
|
127 | ## License
|
128 |
|
129 | MIT © [Teambition](http://teambition.com)
|
130 |
|
131 | [npm-url]: https://npmjs.org/package/gulp-ng-template
|
132 | [npm-image]: http://img.shields.io/npm/v/gulp-ng-template.svg
|
133 |
|
134 | [travis-url]: https://travis-ci.org/teambition/gulp-ng-template
|
135 | [travis-image]: http://img.shields.io/travis/teambition/gulp-ng-template.svg
|