how to minify js files in order via grunt-contrib-

Question

I have a directory like below:

/folder/b.js
/folder/jQuery.js
/folder/a.js
/folder/sub/c.js

I want to minify all these js files in one js file in order:

jQuery.js -> a.js -> b.js -> c.js

Q:
1.How can I do it via grunt-contrib-uglify?(In fact, there are lots of files, it is impractical to specify all source filepaths individually)

2.btw, How can I get unminified files when debug and get minified single file when release and no need to change script tag in html(and how to write the script tag)?

Answer 1

This might be only remotely related to your question but I wanted something similar. Only my order was important in the following way:

I was loading all vendor files (angular, jquery, and their respective related plugins) with a wildcard (['vendor/**/*.js']). But some plugins had names that made them load before angular and jquery. A solution is to manually load them first.

['vendor/angular.js', 'vendor/jquery.js', 'vendor/**/*.js]

Luckily angular and jquery handle being loaded twice well enough. Edit: Although it's not really the best practice to load such large libraries twice, causing your minified file unnecessary bloat. (thanks @Kano for pointing this out!)

Another issue was client-js the order was important in a way that it required the main app file to be loaded last, after all its dependencies have been loaded. Solution to that was to exclude and then include:

['app/**/*.js', '!app/app.js', 'app/app.js']

This prevents app.js from being loaded along with all the other files, and only then includes it at the end.

Answer 2

This can be done using the following Grunt tasks:

1. https://github.com/gruntjs/grunt-contrib-concat concatenates files
2. https://github.com/gruntjs/grunt-contrib-uglify minifies concatenated files

EDIT

I usually run all my files through a Grunt concatenation task using grunt-contrib-concat. Then I have another task to uglify the concatenated file using grunt-contrib-uglify.

Answer 3

I ran into the same issue. A quick fix is just to change the filenames - I used 1.jquery.min.js, 2.bootstrap.min.js, etc.