微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

我有一个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期间,服务器指向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,dest: "dev/js/modules/<foldername>.min.js",<- how do I achieve this?
        }]
    }
}

我一直在阅读很多,但似乎我只是靠近找到答案,并且将概念集中在一起.很多我发现的只是一个文件一个新的目录,重命名.我想将多个文件单个文件转换成新目录,并重命名. Cuz这是我滚的:)

解决方法

所以,我找到了我正在寻找的答案.

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: {
    ...
    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发布的另一个偏差是,我选择了没有准备模块,当它完成时运行它自己的连接.我的认任务(哪个监视器设置为在dev中运行)仍然执行我所有的处理.

这让我有以下结构,准备进行细化为prod /:

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐