Dynamic Development to Static Deploy

   I believe this is an approach beneficial to any application for performance reason. If an application needs to be scalable but can remove the dynamic references there is a opportunity for improvement. With task runner or build process like gulp, grunt and asp.net mvc's bundle for example this is the same solution. What I'm point to is the things I want to create in javascript but don't necessarily need to be dynamic. For example Angular's template property with directives or component's and even routes. While I do like to use templateUrl in development for performances reason I want to include it in the statement as a template. If I'm trying to make the most of my code I need to inject directly
but for validation or organizational reasons I want to point it dynamically.
   This isn't a new problem in the computer science field but I think a lot of web developers will agree to injecting regardless if its development. It makes the code a little less manageable in my opinion but the performance is a higher priority. So to go back to these task runners or build processes we can change all that. This gets me to where I want to be in my development. So my code is dynamic for development but "static" or injected in this sense for deployment. I know there's probably a bad choice of words for describing this problem but its just how I've logical grouped it with similar situations where the output really is static and just pointing to a variable.
   I haven't found any grunt/gulp projects that convert the template/templateUrl properties. However I did find one that converts ng-includes. This helps out with my partial views but for now I'm looking to parse my javascript and looking for the templates to be injected.

Solutions
  • grunt-nginclude
    • With $templateCache 
  • gulp watch-partials
var templateCache = require('gulp-angular-templatecache'),
    watch = require('gulp-watch');

gulp.task('generate', function () {
    gulp.src('public/*/partials/*.html')
        .pipe(templateCache('templates.js', {module: 'YOURMODULENAME', standalone: false}))
        .pipe(gulp.dest('public/js'));
});
 gulp.task('watch-partials', function () {
    gulp.watch('public/*/partials/*.html', ['generate']);
});

Popular posts from this blog

Nginx Best Practices Extended

Installing Windows on Acer chromebook 15 cb3-532

Entity Framework: ToListAynsc & WhereAsync