concat/uglify 使用 grunt 的 js 文件

Question

我有以下文件夹结构

root
    src
        ui
            ui1
                js
                    ui.js
                page1
                    page.js
                page2
                    page.js
            ui2
                js
                    ui.js
                page1
                    page.js
                page2
                    page.js
                page3
                    page.js
    css
    js
    ui

是否有可能运行 g运行t 对此进行 uglify 以实现以下目的：将 root/src/ 中每个 ui[x] 文件夹中的所有 js 文件连接到 root/ui/文件夹保持路径结构完整？

我想结束

root
    src
        ui
            ui1
                js
                    ui.js
                page1
                    page.js
                page2
                    page.js
            ui2
                js
                    ui.js
                page1
                    page.js
                page2
                    page.js
                page3
                    page.js
    css
    js
    ui
            ui1
                ui.min.js
            ui2
                ui.min.js

我的问题是稍后将添加 ui[x] 和 page[x] 文件夹，因此我需要使其动态化。我能够实现的是连接所有文件而不保留路径或保留路径，丑化但不连接。感谢任何帮助。

files: {
    expand: true,
    cwd: 'src/ui/',
    src: '**/*',
    dest: 'ui/'
}

Answer 1

您的问题的解决方案是实施 rename function。此功能的目的是在默认配置无法满足您的用例时，让您更好地控制 src/dest 映射。 rename 函数将为每个与您的 src 模式匹配的源文件调用，并允许您定义确定目标文件的逻辑。

即使我们将多个源文件映射到一个目标文件，这仍然有效。文档说：

If multiple matched src paths are renamed to an identical destination (i.e. if two different files get renamed to the same file), each output will be added to an array of sources for it.

我们的 objective，从 root/src/ui/ 目录开始，收集每个以“.js”结尾的文件路径，并为每个文件路径生成一个目标文件路径，即第一个目录名称加上“ /ui.min.js”。例如，ui1/js/ui.js 将映射到 ui1/ui.min.js，而 ui2/page3/page.js 将映射到 ui2/ui.min.js。

随着逻辑的建立，rename 函数的实现就相当简单了。我们的 Gruntfile 如下所示：

module.exports = function (grunt) {
    grunt.initConfig({
        clean: {
            dist: ['root/ui']
        },

        uglify: {
            dist: {
                files: [
                    {
                        expand: true,
                        cwd: 'root/src/ui/',
                        src: ['**/*.js'],
                        dest: 'root/ui/',
                        rename: function (dest, src) {
                            return dest + src.substring(0, src.indexOf('/') + 1) + 'ui.min.js';
                        }
                    }
                ]
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-uglify');

    grunt.registerTask('default', ['clean', 'uglify']);

};

concat/uglify 使用 grunt 的 js 文件

concat/uglify js files using grunt

gruntjs