lingon-ng-html2js

A Lingon plugin 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.

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.

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.

Type: String

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

Type: String

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

Type: String

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

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.

MIT License