Question

39

How to grunt-uglify multiple script files while keeping folder structure

rated 0 times [ 44] [ 5] / answers: 1 / hits: 19188 / 10 Years ago, wed, february 26, 2014, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

giovanny

Add To Favorites

Follow

Total Points: 314

Total Questions: 101

Total Answers: 90

Location: Tajikistan

Member since Thu, Apr 14, 2022

2 Years ago

answered 10 Years ago anais · Accepted Answer

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!