javascript - 使用 Gulp 为每个模块/目录创建 Angular $templateCache

Question

因此，我正在从 grunt 转向 gulp(或者无论如何都在尝试)，并且我很难让 gulp 完成我在 grunt 中所做的事情。特别是 $templateCache 的东西。

我的 Angular 应用程序被分解成几个组件/模块。每个模块都包含它运行所需的一切( Controller 、指令、部分、scss 等)。

使用 Grunt，我已经能够将每个模块分解为 5 个文件:

• module.min.css//所有模块的 scss 文件编译和拼接
• module.min.js//所有模块 Controller 、指令、服务等连接起来
• module.tpls.min.js//此模块的 $templateCache 中的所有部分
• module.mocks.min.js//此模块的所有单元测试模拟对象
• module.specs.min.js//此模块的所有单元测试规范

这已经运行了 2 年，并且已经成为我的模块化架构的基石。我尝试 gulp 的唯一原因是 1) 好奇心，2) 我的 grunt 文件变得有点毛茸茸，因为我们添加了部署和环境特定的东西，到目前为止 gulp 确实简化了它。

在大多数情况下，我已经想出了如何在 gulp 中完成所有繁重的任务，但我在想出如何为每个模块生成模板缓存文件时遇到了麻烦。所有 gulp-ng|angular-templates|templatecache 插件都采用我的所有部分并创建一个文件。我想将我的所有文件放在 module/partials/*.html 下并创建一个 module.tpls.min.js；并为每个模块执行此操作。

这实际上也是 grunt 的问题，但我用 grunt.file.expand().forEach() 解决了这个问题，如下所示:

grunt.registerTask('prepModules', '...', function(){

    // loop through our modules directory and create subtasks
    // for each module, modifying tasks that affect modules.
    grunt.file.expand("src/js/modules/*").forEach(function (dir) {

        // get the module name by looking at the directory we're in
        var mName = dir.substr(dir.lastIndexOf('/') + 1);

        // add ngtemplate subtasks for each module, turning
        // all module partials into $templateCache objects
        ngtemplates[mName] = {
            module: mName,
            src: dir + "/partials/**/*.html",
            dest: 'dev/modules/' + mName + '/' + mName + '.tpls.min.js'
        };
        grunt.config.set('ngtemplates', ngtemplates);

    });

});

我目前对同一任务的 gulp :

var compileTemplates = gulp.src('./src/js/modules/**/partials/*.html', {base:'.'})
    .pipe(ngTemplates())
    .pipe(gulp.dest('.'));

我只真正查看了这些选项，但似乎没有一个符合我的要求。他们都围绕着更改文件名、文件的最终目的地、模块名或其他任何内容；没有任何关于仅针对它恰好位于的目录执行此操作的说明。

我考虑过使用 gulp-rename，因为它在我进行 CSS 编译时效果很好:

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('.'));

但是，当我在执行 ngTemplates() 之后通过管道传递 rename() 时，它只有最终输出文件的路径(一个日志条目)。当您在 sass() 之后使用 console.log() 路径时，它具有它找到的所有文件的所有路径(很多日志条目)。

有什么想法吗？谢谢!

Answer 1

This SO post有正确的答案，但在我搜索此特定用法时没有出现。我本来打算投票结束我的问题，但由于其他人可能会使用我自己的特定术语进行搜索(因为我这样做了)，所以不理会它并重定向到原始问题以及展示我如何解决我的问题似乎更合适自己的特殊问题。

var fs = require('fs');
var ngTemplates = require('gulp-ng-templates');
var rename = require('gulp-rename');

var modulesDir = './src/js/modules/';

var getModules = function(dir){
    return fs.readdirSync(dir)
        .filter(function(file){
            return fs.statSync(path.join(dir, file)).isDirectory();
        });
};

gulp.task('default', function(){
    var modules = getModules(modulesDir);
    var moduleTasks = modules.map(function(folder){
        // get all partials for this module
        // parse into $templateCache file
        // rename to be /dev/modules/_____/______.tpls.min.js
        return gulp.src(modulesDir + folder + '/partials/*.html', {basedir:'.'})
            .pipe(ngTemplates({module:folder}))
            .pipe(rename(function(path){
                path.dirname = './dev/apps/' + folder + '/';
                path.basename = folder + '.tpls.min';
            }))
            .pipe(gulp.dest('.'));
    });
});

它本质上就像 tasks per folder recipe但更改为使用 gulp-ng-templates。我现在可能会为我的 SCSS 和 JS 使用相同的模式，因为我更加了解它。

似乎相当于 grunt.file.expand().forEach()。