如何在保持文件夹结构的同时咕噜uglify多个脚本文件 [英] How to grunt-uglify multiple script files while keeping folder structure

问题描述

我还没有找到一种很好的方式来咕噜uglify覆盖多个文件夹的多个脚本文件，同时保持文件夹结构（包括丑化文件）的完整性。
我想要这样做的唯一原因是能够提高我正在处理的网页遗留部分的性能。

我找到了一种解决方法，我不想这样做，因为它需要很长时间，就像在这个答案中一样（它们分别指定每个src和dest对）：
如何配置grunt.js以分别缩小文件

我想达到的一个例子：

  ** src dir（no uglify applied）：** 
 src 
 |  -  app1 
 |  -  randomFile.js 
 |  - 脚本
 |  -  file1.js 
 |  -  file2.js 
 |  -  libs 
 |  -  file3.js 
 |  -  file4.js 
 |  -  app2 
 |  - 脚本
 | -  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 
 |  - 脚本
 |  -  file1.js 
 |  -  file2.js 
  

顺便说一句，如果可能的话，希望为CSS文件做同样的事情。

有谁知道这是否可行？

解决方案 的答案在您链接到的帖子中看起来很有希望，但有一点变化：

  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：没有试过自己运行它！

I have not found a good way to grunt-uglify multiple script files spread over multiple folders while keeping the folder structure including the uglified files intact. The only reason I want to do this is to be able to increase the performance of the "legacy" part of the web page I'm working on.

I have found a way around this which I don't want to do, since it will take to much time, and that is to do it like in this answer (they specify each src and dest pair seperately): how to config grunt.js to minify files separately

An example of what I want to achieve:

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

Btw, want to do the same for CSS-files if possible.

Does anyone know if this is possible?

解决方案

The principle in Rafa Heringer's answer on the post you linked to looks promising, with a little twist:

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

The only difference here is the double asterisk between the base path and the wildcard filename with its extension. That will go through all the sub-folders and - hopefully - output each find it finds in its rightful folder.

The output would be:

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

When it comes to doing the same with CSS (using the grunt-contrib-cssmin plugin), the approach mentioned above would still work, but you would have to combine it with the relevant plugin configurations that must be in place to output minified CSS the way you want.

PS: Haven't tried running it myself!

这篇关于如何在保持文件夹结构的同时咕噜uglify多个脚本文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！