gulp-inline-ng2-template

Inline Angular2 HTML and CSS files into JavaScript ES5/ES6 and TypeScript files (and possibly more - not tested).

This plugin uses the ES6 template strings syntax by default (which requires the use of a transpiler -typescript, babel, traceur- to produce valid ES5 files) but you can opt-in for ES5 one.

Very convenient to unit test your component or bundle your components/application (avoid extra HTTP request and keeps your source clean).

note:

0.0.8 adds Jade support (add jade: true to your config)
0.0.6 adds support to style sheets

Installation

npm install gulp-inline-ng2-template --save-dev

Configuration

You can pass a configuration object to the plugin.

defaults = {
  base: '/',          // Angular2 application base folder
  html: true,         // Process .html files
  css: true,          // Process .css files
  target: 'es6'       // Can swap to es5
  indent: 2           // Indentation (spaces)
};

HTML extension is currently hard coded to .html

Example usage

//...
var inlineNg2Template = require('gulp-inline-ng2-template');

var result = gulp.src('./app/**/*.ts')
  .pipe(inlineNg2Template({ base: '/app' }))
  .pipe(tsc());

return result.js
  .pipe(gulp.dest(PATH.dest));

How it works

app.html

<p>
  Hello {{ world }}
</p>

app.css

.hello {
  color: red;
}

app.ts

import {Component, View} from 'angular2/angular2';
@Component({ selector: 'app' })
@View({
  templateUrl: './app.html',
  styleUrls: ['./app.css'],
  directives: [CORE_DIRECTIVES]
})
class AppCmp {}

result (app.ts)

import {Component, View} from 'angular2/angular2';
@Component({ selector: 'app' })
@View({
  template: `
    <p>
      Hello {{ world }}
    </p>
  `,
  styles: [`
    .hello {
      color: red;
    }
  `],
  directives: [CORE_DIRECTIVES]
})
class AppCmp {}

Test

git clone https://github.com/ludohenin/gulp-inline-ng2-template
cd gulp-inline-ng2-template
npm install
npm run test-dev

Todo

Append styles into styles View config property if it exist
Add support for source maps
Configure html files extension and quote/double string wrapper
Add option skipCommented

Licence

MIT

mwawrusch/gulp-inline-ng2-template