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:

4.0.0 -
- Now escapes templates (html & css) backslashes. You may remove your custom workarounds if any
- Proper error handling and propagation
3.0.0 - Breaking changes
- Change processor function signature
2.0.0 - Breaking changes
- Refactor the parser and make it async
- templateProcessor and styleProcessor now accept a callback as 3rd argument
- If you're not using the processor functions, everything will work as in 1.x.
1.1.5 adds customFilePath option
1.1.4 adds supportNonExistentFiles option
1.1.0 adds templateFunction when templateUrl is a function
1.0.0 - Breaking changes
- Add suppport for processors (templates & styles)
- Refactor configuration object (html and css prop dropped)
- Drop jade dependency and related config
0.0.11 adds option to remove line breaks
0.0.10 adds components relative asset paths support (see Configuration)
0.0.8 adds Jade support (add jade: true to your config) => dropped in 1.0.0
0.0.6 adds support to style sheets

Installation

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

Configuration

Options

You can pass a configuration object to the plugin.

defaults = {
  base: '/',                  // Angular2 application base folder
  target: 'es6',              // Can swap to es5
  indent: 2,                  // Indentation (spaces)
  useRelativePaths: false     // Use components relative assset paths
  removeLineBreaks: false     // Content will be included as one line
  templateExtension: '.html', // Update according to your file extension
  templateFunction: false,    // If using a function instead of a string for `templateUrl`, pass a reference to that function here
  templateProcessor: function (path, ext, file, callback) {/* ... */},
  styleProcessor: function (path, ext, file, callback) {/* ... */},
  customFilePath: function(ext, file) {/* ... */},
  supportNonExistentFiles: false // If html or css file do not exist just return empty content
};

Processors configuration

/**
 *  Processor function call signature and type return
 *
 * @Param{String}   file path
 * @Param{String}   file extension (type)
 * @Param{String}   file content
 * @Param{Function} callback function (err, result) => void
 * @Return{void}
 */
function processor(path, ext, file, cb) {
  // async implementation of your source files processing goes here ...
  cb(null, file);
}

Processor Examples

Minify template file before inlining them

import inlineTemplate from 'gulp-inline-ng2-template';
import htmlMinifier from 'html-minifier';

const pluginOptions = {
  base: mySrcPath,
  templateProcessor: minifyTemplate
};

function minifyTemplate(path, ext, file, cb) {
  try {
    var minifiedFile = htmlMinifier.minify(file, {
      collapseWhitespace: true,
      caseSensitive: true,
      removeComments: true,
      removeRedundantAttributes: true
    });
    cb(null, minifiedFile);
  }
  catch (err) {
    cb(err);
  }
}

Credit @lcrodriguez

Template function

Inside your component: templateUrl: templateFunc('app.html')

/**
 *  Template function call signature and type return
 *
 * @Param{String}   filename
 * @Return{String}  returned filename
 */
templateFunction: function (filename) {
  // ...
  return newFilename;
}

CustomFilePath configuration

/**
 *  Custom function name call signature and type return
 *
 * @Param{String}   file extension (type)
 * @Param{String}   file path
 * @Return{String}  returned file path updated
 */
function customFilePath(ext, file) {
  return file;
}

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));

Browserify transform example

Example transform function to use with Browserify.

// ng2inlinetransform.js
var ng2TemplateParser = require('gulp-inline-ng2-template/parser');
var through = require('through2');
var options = {target: 'es5'};

function (file) {
  return through(function (buf, enc, next){
    ng2TemplateParser({contents: buf, path: file}, options)((err, result) => {
      this.push(result);
      process.nextTick(next);
    });
  });
}

// gulp task
return browserify('main.ts', {} )
  .add(config.angularApp.additionalFiles)
  .plugin(require('tsify'), {target: 'es5'})
  .transform('./ng2inlinetransform')
  .bundle()
  .pipe(gulp.dest(config.rootDirectory))

Thanks to @zsedem

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 {}

Contribute

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

davidcblaney/gulp-inline-ng2-template