使用 Gulp 为每个 module/directory 创建 angular $templateCache

Question

所以，我正在从 g运行t 转移到 gulp（或无论如何尝试），但我无法让 gulp 做我想做的事情在 g运行t 中做。特别是 $templateCache 的东西。

我的 angular 应用程序被分成几个 components/modules。每个模块都包含运行所需的一切（控制器、指令、部分、scss 等）。

使用 G运行t，我已经能够将每个模块分解为 5 个文件：

module.min.css // 所有模块的 scss 文件编译并连接
module.min.js // 所有模块控制器、指令、服务等连接起来[=44=]
module.tpls.min.js // 此模块的 $templateCache 中的所有部分
module.mocks.min.js // 此模块的所有单元测试模拟对象
module.specs.min.js // 此模块的所有单元测试规范

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

在大多数情况下，我已经想出了如何在 gulp 中完成我所有的 g运行t 任务，但是我在弄清楚如何生成模板缓存文件时遇到了问题对于每个模块。所有 gulp-ng|angular-templates|templatecache 插件都采用我的所有部分并创建一个文件。我想把我所有的文件都放在 module/partials/*.html 下并创建一个 module.tpls.min.js;并为每个模块执行此操作。

这实际上也是 g运行t 的问题，但我用 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('.'));

我只是真正查看了这些选项，但其中 none 似乎符合我的要求。他们都围绕着更改文件名、文件的最终目的地、模块名或其他任何内容；仅针对它恰好所在的目录没有任何说明。

我考虑过使用 gulp-重命名，因为它在我进行 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

每当我为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 文件。

Answer 2

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-模板进行了更改。我可能会在我的 SCSS 和 JS 中使用相同的模式，因为我更加了解它。

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

使用 Gulp 为每个 module/directory 创建 angular $templateCache

Using Gulp to create angular $templateCache per module/directory

javascript

angularjs

gulp