使用 Gulp 为每个模块/目录创建角度 $templateCache

Question

所以，我正在从 grunt 转移到 gulp（或尝试这样做），我无法让 gulp 完成我在 grunt 中所做的事情。特别是 $templateCache 的东西。

我的 Angular 应用程序分为几个组件/模块。每个模块都包含运行所需的一切（控制器、指令、部分、scss 等）。

使用 Grunt，我已经能够将每个模块归结为 5 个文件：

• module.min.css //所有模块scss文件编译和连接
• module.min.js // 所有模块控制器、指令、服务等串联
• 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);

    });

});

我目前为同一任务而大吃一惊：

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() 的 gulp 等价物。

Answer 2

每当我为 gulp 任务处理 scss/sass 时，我只会将一个 scss 文件作为源参数。此参数文件由导入列表组成。这样你就不需要依赖 gulp 来为你连接 scss 文件内容了。

 //in gulpfile
 gulp.src('./src/js/modules/**/scss/main.scss', {base:'.'})

 //in main.scss
 @import 'a', 'b', 'c';

a、b 和 c 将代表您的其他 scss 文件。