使用grunt将许多目录中的许多文件连接到新目录中的单个重命名文件中

Question

我有一个可能有很多模块的Angular项目.每个模块都有自己的目录,包含控制器,指令,服务等的子目录.如下所示:

src
|-- js
    |-- modules
        |-- moduleOne
            | module.js
            |-- controllers
                | listController.js
                | detailController.js
            |-- directives
                | listItem.js
                | summaryWidget.js
            |-- filters
            |-- services
                | moduleService.js

我的构建基本上捆绑并编译来自src /的文件并放入dev /,然后缩小dev /中的文件并移动到prod /.在开发期间,服务器指向dev /文件夹,在生产中,服务器指向prod /文件夹(也就是为什么文件以.min.js结尾,即使它们只是编译/连接).这个过程运作良好.

目前,我的concat任务是抓取moduleOne /中的所有文件,并在我的dev目录中创建一个moduleOne.js文件.这就是我想要的,但更动态:

concat: {
    modules: {
        files: {
            "dev/js/modules/moduleOne.min.js": [
                "src/js/modules/moduleOne/*.js",
                "src/js/modules/moduleOne/**/*.js"
            ],
            "dev/js/modules/moduleTwo.min.js": [
                "src/js/modules/moduleTwo/*.js",
                "src/js/modules/moduleTwo/**/*.js"
            ]
        } 
    }
}

问题是我必须为每个模块执行此操作,但不要认为我需要这样做.

我尝试了以下操作,因为这是我想做的事情:

concat: {
    modules: {
        files: [{
            expand: true,
            cwd: "src/js/modules",
            src: "**/*.js",
            dest: "dev/js/modules",
            ext: ".min.js"
        }]
    }
}

但结果是我的所有文件和目录结构都从src /移到了dev /.我基本上用concat做副本,没用.

我想做这样的事情:

concat: {
    modules: {
        files: [{
            expand: true,
            cwd: "src/js/modules",
            src: "**/*.js",
            dest: "dev/js/modules/<foldername>.min.js",  <- how do I achieve this?
        }]
    }
}

我一直在阅读很多内容,但似乎我只能找到答案并且无法将概念放在一起.我找到的很多内容只是将一个文件放入一个新目录中,并重命名.我想将多个文件单个文件重命名为新目录.因为我是如何滚动的:)

Answer 1

所以,我找到了我想要的答案.

这个SO帖子基本上是一个很好的答案的问题.不幸的是,当我创建我的问题时它没有出现,否则你就不会读到这个.

我的需求略有调整.我需要动态地为每个模块而不是只有一个compile.js文件做这个,所以我的最终代码如下,放在我的initConfig()之后:

grunt.registerTask("prepareModules", "Finds and prepares modules for concatenation.", function() {

    // get all module directories
    grunt.file.expand("src/js/modules/*").forEach(function (dir) {

        // get the module name from the directory name
        var dirName = dir.substr(dir.lastIndexOf('/')+1);

        // get the current concat object from initConfig
        var concat = grunt.config.get('concat') || {};

        // create a subtask for each module, find all src files
        // and combine into a single js file per module
        concat[dirName] = {
            src: [dir + '/**/*.js'],
            dest: 'dev/js/modules/' + dirName + '.min.js'
        };

        // add module subtasks to the concat task in initConfig
        grunt.config.set('concat', concat);
    });
});

// the default task
grunt.registerTask("default", ["sass", "ngtemplates", "prepareModules", "concat", "uglify", "cssmin"]);

这基本上使得我的concat任务看起来像我手工编写它时所做的那样,但只是更简单(可扩展!).

concat: {
    ...
    moduleOne: {
        src: "src/js/modules/moduleOne/**/*.js",            
        dest: "dev/js/modules/moduleOne.min.js"
    },
    moduleTwo:{
        src: "src/js/modules/moduleTwo/**/*.js",
        dest: "dev/js/modules/moduleTwo.min.js"
    }
}

我从SO帖子中得到的另一个偏差是我选择不让prepareModules在完成后自己运行concat.我的默认任务(设置为在开发期间运行的手表)仍然执行我的所有处理.

这让我有了以下结构,准备缩小为prod /:

| dev
    | js
        | modules
            |-- moduleOne.min.js
            |-- moduleTwo.min.js