Transitioning from grunt to gulp has been a bit challenging for me, especially when it comes to replicating the $templateCache functionality. In my Angular app, I have multiple components/modules with all their necessary resources encapsulated within each module.
With Grunt, I've managed to streamline each module into 5 essential files:
- module.min.css // concatenated SCSS files
- module.min.js // concatenated controllers, directives, services
- module.tpls.min.js // partials in $templateCache
- module.mocks.min.js // unit test mock objects
- module.specs.min.js // unit test specs
This modular structure has served me well for years, but the growing complexity of my Grunt file prompted me to explore Gulp as an alternative. The transition has definitely simplified things, but I'm struggling to replicate the template caching functionality.
In my attempts so far, I've encountered plugins that combine all partials into one file, whereas I need to generate a separate template cache file for each module using all HTML files under module/partials/*.html.
In the past, I solved a similar issue in Grunt by looping through directories with grunt.file.expand().forEach() as shown below:
// Example Grunt task to prepare modules
grunt.registerTask('prepModules', '...', function(){
grunt.file.expand("src/js/modules/*").forEach(function (dir) {
var mName = dir.substr(dir.lastIndexOf('/') + 1);
ngtemplates[mName] = {
module: mName,
src: dir + "/partials/**/*.html",
dest: 'dev/modules/' + mName + '/' + mName + '.tpls.min.js'
};
grunt.config.set('ngtemplates', ngtemplates);
});
});
Here's my current Gulp setup for this task:
// Current Gulp task for compiling templates
var compileTemplates = gulp.src('./src/js/modules/**/partials/*.html', {base:'.'})
.pipe(ngTemplates())
.pipe(gulp.dest('.'));
While exploring options, none seemed to address my specific requirement of generating individual template cache files per module. Most solutions focused on renaming or relocating files, rather than partitioning based on directory.
I considered using gulp-rename as it worked effectively with CSS compilation:
// Example Gulp task for compiling SCSS
var compileScss = gulp.src('./src/js/modules/**/scss/*.scss', {base:'.'})
.pipe(sass({includePaths: ['./src/scss']}))
.pipe(rename(function(path){
path.dirname = path.dirname.replace(/scss/,'css');
}))
.pipe(gulp.dest('.'));
However, when applying rename() after ngTemplates(), only the final output file path is affected rather than individual paths like with sass(). This discrepancy has left me puzzled and seeking suggestions. Any insights would be greatly appreciated!