lingon-ng-html2js

A plugin for gulp which generates AngularJS modules, which pre-load your HTML code into the $templateCache. This way AngularJS doesn't need to request the actual HTML files anymore.

Usage

First, install lingon-ng-html2js as a development dependency:

npm install --save-dev lingon-ng-html2js

Then, add it to your lingon.js:

var ngHtml2Js = require("lingon-ng-html2js");

lingon.preProcessor('html').add(function(params) {
  return ngHtml2js();
});
gulp.src("./partials/*.html")
	.pipe(ngHtml2Js({
		moduleName: "MyAwesomePartials",
		prefix: "/partials"
	}))
	.pipe(gulp.dest("./dist/partials"));

The main reason to use this module would be optimization. By pre-loading the HTML files, you can spare requests and loading time when the files are actually needed. When you are optimizing, you should do it properly. So, we should add the following plugins: gulp-htmlmin and gulp-uglify:

var ngHtml2js = require("lingon-ng-html2js");
var htmlmin = require("gulp-htmlmin");
var uglify = require("gulp-uglify");

lingon.preProcessor('html').add(function(params) {
  var processors = [];

  // only run minification for build task
  if (lingon.task == 'build') {
    processors.push(
      htmlmin({
        collapseWhitespace: true,
        removeComments: true
      })
    );
  }

  processors.push(
    ngHtml2js({
      moduleName: 'templates',
      base: 'source'
    })
  );

  return processors;
});

lingon.postProcessor('js').add(function(params) {
  // only run minification for build task
  if(lingon.task == 'build') {
    return uglify({
      outSourceMap: true
    });
  }
});

This way you end up with 1 single, minified Javascript file, which pre-loads all the (minified) HTML templates.

API

ngHtml2Js(options)

options.moduleName

Type: String

The name of the generated AngularJS module. Uses the file url if omitted.

options.prefix

Type: String

The prefix which should be prepended to the file path to generate the file url.

options.stripPrefix

Type: String

The prefix which should be subtracted from the file path to generate the file url.

options.base

Type: String

The base directory used for resolving the relative file path to generate the file url. Falls back to regular file.base if unset.

License

MIT License