https://github.com/fiveladdercon/gulp-angular-inline-template
Wrap partial HTML templates in ng-template script tags for inlining.
https://github.com/fiveladdercon/gulp-angular-inline-template
Last synced: over 1 year ago
JSON representation
Wrap partial HTML templates in ng-template script tags for inlining.
- Host: GitHub
- URL: https://github.com/fiveladdercon/gulp-angular-inline-template
- Owner: fiveladdercon
- Created: 2016-01-26T19:47:27.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-01-26T20:00:17.000Z (over 10 years ago)
- Last Synced: 2025-03-09T03:17:12.928Z (over 1 year ago)
- Language: JavaScript
- Size: 4.88 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# gulp-angular-inline-template
Wraps template HTML in ng-template script tags for inlining.
## Install
```
> npm install gulp-angular-inline-template
```
## Usage
Takes an angular directive template and wraps it in a ng-template script tag:
```
dialog.directive.html
This is my dialog
```
```javascript
var inline = require('gulp-angular-inline-template');
gulp.src('dialog.directive.html')
.pipe(inline())
...
```
```
dialog.directive.html
<div class='dialog'>
<h1>This is my dialog</h1>
<div ng-transclude></div>
</div>
```
Directive templates can then be spliced into the index.html:
```
index.html
...
##directives##
```
```
gulp.src('**/*.directive.html')
.pipe(inline())
.pipe(splice({key:'##directives##',outer:'index.html'}))
.pipe(gulp.dest('dist'))
```
```
index.html
...
...
...
...
```
Since templates are now shipped with the index.html and stored in the template
cache, templateUrl directive properties will not issue server requests:
```javascript
dialog.directive.js
angular.module('myApp').directive('myDialog', function () {
return {
templateUrl: 'dialog.directive.html', // Does not trigger an AJAX request
link: ...
};
});
```
Note that if you minify your HTML, you need to minimize before wrapping your
templates in script tags. This is because script tags do not normally contain
HTML and this can trip up minifiers. Also pass a truthy value to the inline
operation to omit new lines in the output:
```
gulp.src('**/*.directive.html')
.pipe(htmlmin())
.pipe(inline(true))
.pipe(splice({key:'##directives##',outer:'index.html'}))
.pipe(gulp.dest('dist'))
```
However this does not minimize the index.html file. Instead, send
it through the pipe and omit it from the processing step:
```
gulp.src(['**/*.directive.html','index.html'])
.pipe(htmlmin())
.pipe(subset(/directive.html$/, inline(true)))
.pipe(splice('##directives##'))
.pipe(gulp.dest('dist'))
```
## API
```
gulp-angular-inline-template([minified])
```
Without an options the inline template wraps file contents in script tags:
```
... contents of $filename ...
```
#### minified : truthy
Passing a truthy value as an argument removes new lines from the script tags.
## Test
```
> npm test
```