Question

所以，我正从咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕特别是$ templateCache的东西。

我的角度应用程序分为几个组件/模块。每个模块都包含运行所需的一切（控制器，指令，部分，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中完成所有的grunt任务，但是我无法弄清楚如何为每个模块生成模板缓存文件。所有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文件作为source参数。此参数文件由导入列表组成。这样您就不需要依赖gulp为您连接scss文件内容了。

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

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

a，b和c代表你的其他scss文件。

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

2 个答案: