GulpJS: Caching HTML Templates


Caching HTML Templates

  • Use gulp-angular-templatecache in order to concatenates and registers AngularJS templates in the $templateCache
  • All HTML files will be stored as key-value pair using angular $templateCache service
  • URL of HTML will be key and html code of file will be value in $templateCache service
  • This will reduce HTTP requests
  • For each HTML request by angular, first it will check $templateCache service, If not found then it will make HTTP request for that HTML file
  • standAlone attribute in options means to make a new angular module for templates
  • gulp-angular-templatecache will create a file and using .run() service of main module, this will load all html in $templateCache service

Pre Install:

    npm install --save-dev gulp gulp-load-plugins 


    npm install --save-dev gulp-angular-templatecache gulp-minify-html 


    var gulp = require('gulp');
    var $ = require('gulp-load-plugins')({ lazy: true });
    var options =   {
                module: 'ModuleName',
                standAlone: false,
                root: 'scripts/app/'

    gulp.task('templatecache', function () {

        return gulp
            .pipe($.minifyHtml({ empty: true }))


    gulp templatecache

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s