GulpJS: Caching HTML Templates

Standard

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 

Install:

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

Code:

    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
            .src('**/*.html')
            .pipe($.minifyHtml({ empty: true }))
            .pipe($.angularTemplatecache(
                    'templates.js',
                    options
                ))
            .pipe(gulp.dest('./.tmp/'));
    });

Execute:

    gulp templatecache
Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s