Outputting multiple JavaScript files ending in *.min.js

Oct 18, 2012 at 4:30 AM

Hi there

Excellent job with the Compressor.

I feel there's one thing missing from the documentation - when you have multiple JS files to compress, but you don't want them concatentated in to one file, how do you control the output file name so it ends in *.min.js?

For example, if you have:

<ItemGroup>
    <JavaScriptFiles Include="file1.js"/>
    <JavaScriptFiles Include="file2.js"/>
</ItemGroup>

what should the <JavaScriptCompressorTask> attribute 'OutputFile' look like, so that you get:

file1.min.js
file2.min.js

?

Cheers
Matt

Coordinator
Oct 18, 2012 at 4:38 AM

U can have MULTIPLE file groups and mutliple <JavaScriptCompressorTask>

 

eg

<ItemGroup>
    <JavaScriptFiles_A Include="file1.js"/>
    <JavaScriptFiles_A Include="file2.js"/>
</ItemGroup>

 

<ItemGroup>
    <JavaScriptFiles_B Include="file3.js"/>
    <JavaScriptFiles_B Include="file4.js"/>
</ItemGroup>

<!-- 1st Task with 2nd set of settings. (eg. output = "aaa.js.min")
<JavaScriptCompressorTask>..
.

<!-- 2nd Task with 2nd set of settings. (eg. output = "bbb.js.min")
<JavaScriptCompressorTask>..

 

is that what u ment?

Oct 18, 2012 at 5:22 AM

Hi purekrome, and thanks.

Not really, actually, no.

Your examples output eg:

aaa.js.min

whereas I want it to output:

aaa.min.js


And, for the purposes of this question, I want to keep each original file in a separate JS file.

Cheers
Matt

Oct 18, 2012 at 5:28 AM

So I guess what I'm looking for is a variable other than (but similar to) 'JavaScriptFiles.Identity' that I can use to get the filename without the file extension, so I can then add '.min' in between.

Currently in my Build XML file I have this:

OutputFile="%(JavaScriptFiles.Identity).min

which puts the .min after the .js 

i.e [file-name].js.min

which is not what I want.

Cheers
Matt

Coordinator
Oct 18, 2012 at 7:02 AM

Yep, gotcha. I misunderstood - but my answer was close. Ok, the issue is not YUIC or our MSBuild task, but actually MSbuild and how to write the correct syntax. I -believe- it can be done.

This is the crap/long/poor/plan-z way of doing it

<ItemGroup><JS_File1 Include="file1.js"/></ItemGroup>
<ItemGroup><JS_File1 Include="file2.js"/></ItemGroup>
<ItemGroup><JS_File1 Include="file3.js"/></ItemGroup>
<ItemGroup><JS_File1 Include="file4.js"/></ItemGroup>

<JavaScriptCompressorTask SourceFiles="@(JS_File1)" OutputFile="@(JS_File1).min"/>
<JavaScriptCompressorTask SourceFiles="@(JS_File2)" OutputFile="@(JS_File2).min"/>
<JavaScriptCompressorTask SourceFiles="@(JS_File3)" OutputFile="@(JS_File3).min"/>
<JavaScriptCompressorTask SourceFiles="@(JS_File4)" OutputFile="@(JS_File4).min"/>

So what i'm doing here is declaring each file seperatly. Then saying "run this task, for that file .. and output the result to xxx.min. And do this 4 times. 

As I said -> really painful.

The trick would be to do this (in MSBuild jive...)

<ItemGroup>
    <JS_File1 Include="file1.js"/>
    <JS_File1 Include="file2.js"/>
    <JS_File1 Include="file3.js"/>
    <JS_File1 Include="file4.js"/>
</ItemGroup>

<!-- now this is the shiz i have no idea about -->
foreach(@(JS_Files))
    <JavaScriptCompressorTask SourceFiles="@(theFile)" OutputFile="@(theFile).min"/>
Hmm. I wonder if someone can help on StackOverflow? Lets see... I've just asked the question.

Coordinator
Oct 18, 2012 at 8:31 AM

Hi,

My first thought would be:  Do you really need to do this?  Is it the end of the world if the files are .js.min instead of .min.js?

My second thought is: you can achieve this doing as PK suggests, though it's not the best as he points out.

My third is that Stack Overflow as ever is a bounty of goodness: http://stackoverflow.com/questions/5377917/msbuild-copy-files-with-a-name-based-on-the-original-following-a-pattern and it links to another option if using MSBuild 4

hth

Oct 19, 2012 at 1:45 AM

Hi guys, and thanks again.

FYI I always Google answers to my questions before posting my own questions - particularly as Googling it is invariably way faster than posting a question and getting the answer. I often will search direct at SO too. I think in this case (and my other question) it was a lack of understanding / not knowing what to Google though.

Anyway. @purekrome, that works for me. I had hoped for a bit more elegance, but as long as it works, I'm not so fussed! I am new to MSBuild so am not up with the syntax on variables etc., so was looking for some pointers in that regard.

@freeranger:

1) No it's not the end of the world, it's just better IMO, and I thought this would be a relatively common requirement but didn't find anything on Google or SO about it. Additionally, as I use shared hosting I can't modify mime-types on my server, and to my understanding therefore serving JS files as an unknown '.min' file/mime type has potential issues with it. Either way I was renaming each file by hand the get the file naming I wanted, which seemed a bit clunky, as well as reliant on a human(!), and I couldn't find help on Google or in the documentation for the tool, so I asked the question.

2) That'll work! I thought a there might be a simple variable name I was missing though to make things far easier, from 3) it looks like there could be one.

3) I'll see if I can decipher that MSBuild 4 example for my needs.

Cheers
Matt

Nov 20, 2012 at 3:15 AM

Hello,

I'm just wondering if this problem has been solved and if it has, can someone please share the solution?

Thank you very much!

Coordinator
Nov 20, 2012 at 3:44 AM

Hi @hykyit

um.. yes I believe it has been solved. As suggested (above), it's not an issue with YUI Compressor .NET itself .. but about how you configure your MSBuild file.

Check out the sample MSBuild code (above) for some help.

If you're still having problems, try asking in this thread here. If we can't help, we'll redirect you to a place that can help.

Nov 20, 2012 at 8:28 AM

Hi @purekrome,

Yes I am aware that it's related to the configuration of the MSBuild file, but unfortunately, I wasn't sure how to configure it before (I only learn about MSBuild yesterday).

 

I managed to configure the XML to output the files to all end with ".min.js" already. Here's how I did it:

      <JavaScriptCompressorTask
          SourceFiles="@(JavaScriptFiles)"
          OutputFile="%(RelativeDir)%(JavaScriptFiles.Filename).min.js" />

Thanks for the reply! ;)

Coordinator
Nov 21, 2012 at 2:39 AM

NP :)

yeah - so for every source file, it's now minifiyng each one seperately? and each min'd file is postpended with .min.js ?

Nov 21, 2012 at 4:20 AM
Edited Nov 21, 2012 at 4:23 AM

Top work @hykyit!!

Worthy of being in the documentation IMO!

Coordinator
Nov 21, 2012 at 4:20 AM

I should make a video of this.