如何在保持文件夹结构的同时对多个脚本文件进行 grunt-uglify

Question

我还没有找到一种好方法来对分布在多个文件夹中的多个脚本文件进行 grunt-uglify，同时保持包括丑化文件在内的文件夹结构完整。我想要这样做的唯一原因是能够提高我正在处理的网页的“遗留”部分的性能。

我找到了一种我不想做的解决方法，因为这会花费很多时间，那就是像这个答案中那样做（他们分别指定每个 src 和 dest 对）：如何配置 grunt.js 来单独缩小文件

我想要实现的目标的一个例子：

**src dir (no uglify applied):**
src
 |- app1
    |- randomFile.js
    |- scripts
       |- file1.js
       |- file2.js
    |- libs
       |- file3.js
       |- file4.js
 |- app2
   |- scripts
       |- file1.js
       |- file2.js

**destination dir (uglify applied, same file name):**
dist
 |- app1
    |- randomFile.js
    |- scripts
       |- file1.js
       |- file2.js
    |- libs
       |- file3.js
       |- file4.js
 |- app2
    |- scripts
       |- file1.js
       |- file2.js

顺便说一句，如果可能的话，希望对 CSS 文件执行相同的操作。

有谁知道这是否可能？

Answer 1

其原理在 Rafa Heringer的回答 在您链接到的帖子上 看起来很有希望，但有一点小小的改变：

uglify: {
    min: {
        files: grunt.file.expandMapping(['path/**/*.js', 'path2/**/*.js'], 'destination/', {
            rename: function(destBase, destPath) {
                return destBase+destPath.replace('.js', '.min.js');
            }
        })
    }
}

这里唯一的区别是基本路径和通配符文件名及其扩展名之间的双星号。这将遍历所有子文件夹，并希望输出在其正确文件夹中找到的每个子文件夹。

输出将是：

path/test.js => destination/path/test.min.js
path/subpath1/abc.js => destination/path/subpath1/abc.min.js
path/subpath2/yey.js => destination/path/subpath2/yey.min.js
path2/foo.js => destination/path2/foo.min.js

当涉及到做同样的事情时 CSS （使用 grunt-contrib-cssmin 插件），上面提到的方法仍然有效，但是您必须将其与必须到位的相关插件配置结合起来才能输出缩小的 CSS 你想要的方式。

附： 没试过自己运行！

Answer 2

与@dionnis的答案类似，但在相同的文件夹中存储缩小文件：

    uglify: {
        all: {
            files: [{
                expand: true,
                cwd: 'path/to/js/',
                src: ['*.js', '!*.min.js'],
                dest: 'path/to/js/',
                ext: '.min.js'
            }]
        }
    }

.

Answer 3

实际上您可以使用以下方法：

uglify: {
  all: {
    files: [{
      expand: true,
      cwd: 'js/',
      src: ['*.js', '**/*.js'],
      dest: 'js-min/',
      ext: '.min.js',
    }],
  },
}

.

Answer 4

从Wallace的答案很大，但如果您尝试缩小的文件不存在于Grunt开始前不存在（即如果您取决于另一个任务），则它将不起作用，因为在任何任务之前生成地图是跑步。

我想出了一个解决方案来单独缩小生成的文件，使用节点包UGLify-JS而不是Grunt-Contrib-Uglify。

• 将Uglify-JS添加到您的包中.JSON
• 将以下示例中的一个添加到grunfile（如果您使用的是使用示例1），则在适当的情况下将“您的文件”替换为“您的文件”）。
• 如果需要更改缩小文件目标或扩展，请使用示例2。它使用grunt.file.recurse使用回调，为您提供每个文件的根目录，子目录和文件名（然后更容易构建自定义目标路径）。将要扫描的目录替换为“文件夹”，并在此处构建您自己的“自定义路径”。

示例1： grunt.file.expand

grunt.registerTask('uglifyFiles', 'Uglifies files', function () {
    var jsp = require("uglify-js").parser,
        pro = require("uglify-js").uglify,
        count = 0;

    grunt.file.expand(['YOUR FILES HERE']).forEach(function (abspath) {
        // Exclude already minified files (with extension .min.js)
        if (!abspath.match(/\.min\.js$/i)) {
            // Get Abstract Syntax Tree
            var ast = jsp.parse(grunt.file.read(abspath));
            // If mangling
            // ast = pro.ast_mangle(ast);
            // If squeezing
            ast = pro.ast_squeeze(ast);
            // Write new file
            grunt.file.write(abspath.replace(/\.js$/i, '.min.js'), pro.gen_code(ast));
            count += 1;
        }
    });

    grunt.log.oklns("Successfully uglified " + count + " files");
});

.

示例2： grunt.file.recurse

grunt.registerTask('uglifyFiles', 'Uglifies files', function () {
    var jsp = require("uglify-js").parser,
        pro = require("uglify-js").uglify,
        count = 0;

    grunt.file.recurse('FOLDER', function callback(abspath, rootdir, subdir, filename) {
        // Exclude already minified files (with extension .min.js)
        if (!abspath.match(/\.min\.js$/i)) {
            // Get Abstract Syntax Tree
            var ast = jsp.parse(grunt.file.read(abspath));
            // If mangling
            // ast = pro.ast_mangle(ast);
            // If squeezing
            ast = pro.ast_squeeze(ast);
            // Write new file, using abspath or rootdir, subdir and filename
            grunt.file.write('CUSTOM PATH HERE', pro.gen_code(ast));
            count += 1;
        }
    });

    grunt.log.oklns("Successfully uglified " + count + " files");
});

.

Answer 5

这个解决方案不适合我。

这是工作示例：

        path: {
            build: {
               src: 'assets',
               js: 'js',
               css: 'css'
            },
            js: 'js',
            css: 'css'
        },
        uglify: {
            scripts: {
                expand: true,
                cwd: '<%= path.js %>/',
                src: [
                    '**/*.js', 
                    '*.js',
                    //skip minified scripts
                    '**/!*.min.js', 
                    '!*.min.js'
                ],
                dest: '<%= path.build.src %>/<%= path.build.js %>/',
                rename: function (destBase, destPath) {
                    return destBase + destPath.replace('.js', '.min.js');
                }
            }
        },
        //same options for css minify
        cssmin: {
            styles: {
                expand: true,
                cwd: '<%= path.css %>/',
                src: [
                    '**/*.css',
                    '*.css',
                    //skip minified styles
                    '**/!*.min.css', 
                    '!*.min.css'
                ],
                dest: '<%= path.build.src %>/<%= path.build.css %>/',
                rename: function (destBase, destPath) {
                    return destBase + destPath.replace('.css', '.min.css');
                }
            }
        },
        //and watch it for changes
        watch: {
            js: {
                files: [
                    '<%= path.js %>/*.js',
                    '<%= path.js %>/**/*.js'
                ],
                tasks: [
                    'uglify:scripts'
                ],
                options: {
                    livereload: true
                }
            },
            css: {
                files: [
                    '<%= path.css %>/*.css',
                    '<%= path.css %>/**/*.css'
                ],
                tasks: [
                    'cssmin:styles'
                ],
                options: {
                    livereload: true
                }
            }
        }

.

• Grunt 0.4.1
• grunt-contract-uglify 0.9.1
• grunt-contract-cssmin 0.2.2
• grunt-contrip-watch 0.6.1