A plugin for Lingon 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({
moduleName: 'templates',
base: 'source'
});
});
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.