Using AjaxMinTask to generate a single file

Jun 20, 2012 at 10:43 AM

I was wondering if it is possible to generate a single compressed and concatenated Javascript file, instead of just minifying all JS files and generate one .min.js file for all of them.

I know this can be done using the commandline, but can this be done in a build task?

Jun 23, 2012 at 12:51 AM

Good point; I think that might be something missing from the task code. Let me look into that and see if there's a property I can add to either minify each one (current behavior) or combine all source files and minify the result.

Jun 23, 2012 at 2:23 AM

The current task takes two required parameters: JsSourceExtensionPattern and JsTargetExtension. What it does is iterate through all the source files, and for each one individually, it matches the source extension pattern, replaces it with the target extension, then uses that path as the destination file for the minification of the source file. So for instance, if the source files are "foo.js" and "bar.js", the source pattern is "\.js$" and the target extension is ".min.js", the destination files will be "foo.min.js" and "bar.min.js" (and there are similar properties for the CSS side of the tool).

What if we did this: the parameters can either be the JsSourceExtensionPattern/JsTargetExtension pair OR a new property named JsCombinedFileName. If you use JsCombinedFileName, it'd be an error to specify the other two, and vice-versa. If the new property is used, instead of minifying each source file into its own resulting minified file, it will read the contents of all the source files into a single source string, minify that combined code, and then write the results to the specified combined file name.

So this is the current behavior, which minifies to individual files (as per the documentation page):

<AjaxMin Switches="-global:jQuery,$"
    JsSourceFiles="@(JS)"  JsSourceExtensionPattern="\.js$" JsTargetExtension=".min.js"
    CssSourceFiles="@(CSS)" CssSourceExtensionPattern="\.css$" CssTargetExtension=".min.css"  />

And this would minify all the JS files to a single file named "Combined.min.js" and all the CSS file to a single file named "Combined.min.css":

<AjaxMin Switches="-global:jQuery,$"
    JsSourceFiles="@(JS)"  JsCombinedFileName="Combined.min.js"
    CssSourceFiles="@(CSS)" CssCombinedFileName="Combined.min.css"  />

I think we might want to be a little smarter in our actual project files, though, and have separate folders/groups where source files in one group minify to individual files, and source files in another folder/group get combined together into a single file. What do you think? I can go ahead and add the new property and behavior if you think that'd be a useful/good idea.

Jun 26, 2012 at 5:36 AM

Thanks for the answer!

What you're describing is exactly what I'm looking for, so it is both a useful and a good idea :)

Jun 26, 2012 at 3:37 PM

Okay, then I'll do a little unit testing on the code and get it checked in for you this week.

Jun 27, 2012 at 2:57 AM

Give version 4.56 a try. I haven't updated the online documentation yet, but what I've written in this discussion thread should get you started. Let me know how it goes: whether it meets your needs, or if you need a tweak or two.

Jun 28, 2012 at 5:30 AM

It works like a dream, exactly what we needed!

Thanks so much for this :D

Jul 9, 2012 at 1:15 PM

Works like a charm, but there is a little problem with error reporting. The task concatenates input files and then minifies concatenated text to the output file. Line numbers are reported for concatenated text. If you double click on the error/warning in the output window minified file is opened; obviously line numbers are incorrect.

Is there any reason for concatenate-and-minify, why not minify-and-concatenate? Latter would allow reporting the error for the original input file.

Jul 9, 2012 at 3:19 PM

There is a difference, but it shouldn't be too big. The EXE minifies then concatenates; I'll change the task to do the same.