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

Question

我有一个可能包含许多模块的 Angular 项目。每个模块都有自己的目录，其中包含 Controller 、指令、服务等的子目录。像这样:

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来做copy的，没什么用。

我想做这样的事情:

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

所以，我找到了我正在寻找的答案。

This SO post基本上是同一个问题，答案很好。不幸的是，当我创建我的问题时它没有出现，否则你不会读到这个。

我的需求略有调整。我需要为每个模块动态地执行此操作，而不是仅使用一个 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。我的默认任务( watch 设置为在开发期间运行)仍然完成我的所有处理。

这给我留下了以下结构，可以将其缩小为 prod/:

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