如何在保持文件夾結構的同時咕嚕uglify多個腳本文件

Question

我還沒有找到一種很好的方式來咕嚕uglify跨多個文件夾的多個腳本文件，同時保持包括uglified文件的文件夾結構完整。 我想要做到這一點的唯一原因是能夠提高我正在處理的網頁的「遺留」部分的性能。

我發現了一種解決方法，我不想這樣做，因爲它需要很長時間，就像在這個答案中一樣（它們分別指定每個src和dest對）： how to config grunt.js to minify files separately

什麼，我想實現的一個例子：

**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的回答on the post you linked to看起來很有希望，有一點扭曲：

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。

PS：還沒有試過自己運行它！

Answer 2

華萊士的答案很棒，但如果你想要縮小的文件在grunt開始之前不存在（即如果你依賴於另一個任務），它將不起作用，因爲之前生成的是地圖任何任務都會運行。

我想出了一個解決方案，使用節點包uglify-js而不是grunt-contrib-uglify單獨縮​​小生成的文件。

• 添加醜化-JS你的package.json
• 添加下面的例子之一，你Grunfile（只需更換「您的文件HERE」通過適當的水珠（S）如果你使用實例1）。
• 如果您需要更改縮小文件目標或擴展名，請改爲使用示例2。它使用帶回調的grunt.file.recurse，它爲您提供每個文件的根目錄，子目錄和文件名（建立自定義目標路徑比較容易）。將「FOLDER」替換爲您要掃描的目錄，然後構建您自己的「CUSTOM PATH HERE」。

例1：用grunt.file。擴大

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 3

其實你可以使用以下方法：

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

Answer 4

由@DioNNiS答案相似，但商店縮小文件中的相同的文件夾：

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

Answer 5

This solution不適合我。

這是工作例如：

 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 
       } 
      } 
     } 

• 咕嚕0.4.1
• grunt-contrib-uglify 0.9.1
• grunt-contrib-cssmin 0.12.2
• grunt-contrib-watch 0.6.1