How to use YUI Compressor for .Net

Dec 14, 2009 at 3:58 PM

Could anyone explain, how to use YUI Compressor in my web site? I need minify all my js and css on the site.

So, I have a web site in VS2008 (IIS7), download two dll (Yahoo.Yui.Compressor.dll and EcmaScript.NET.modified.dll) from this site, copy them to my Bin folder and run my application. Nothing works.

What I should to to?

 

Thank you. 

Sep 1, 2010 at 11:20 AM

Team,

Is there anyone who can explain (step-by-step) on how to use YUI compressor of .NET 3.5. We desperately need to use this in our project. Your help is much appreciated.

Thanks,

Ram

Coordinator
Sep 2, 2010 at 12:46 AM

Sure - i can help :)

Your question is pretty broad, though. So .. lets start out by me asking you a question : what do you want to do? Do you have an ASP.NET website (webforms or MVC?). Do you have some CSS? or even some javascript? do you wish to combine multiple css into one file? multiple javascript into one file? or only for some files?

Also, show us a screen shot or two of your project layout, mainly showing where the CSS file(s) and javascript file(s) are located, with respect to the root of your website folder structure. From there, I'll give u all the magic shiz u need  to get this bad boy, running :)

Sep 2, 2010 at 4:09 AM

Hi,

So, I use ASP.NET 3.5 webforms. In the root directory I have folders "Css" and "Javascript". In those folders there are several .css and .js files that site uses. First, I need combine all css in one file, and all js in one file too (I can't do it in that folder as need diifferent files in these folders), then minify, in other words instead to have multiple references to js and css file in rendered html code i need one for css and one for js. By that reference Web Server (YUI Compressor) should return me combined and minified code:

 

==============================================================

instead of:

    <link href="Css/StyleSheet1.css" rel="stylesheet" type="text/css" />
    <link href="Css/StyleSheet2.css" rel="stylesheet" type="text/css" />
    <link href="Css/StyleSheet3.css" rel="stylesheet" type="text/css" />

in html code shold be:

 <link href="GiveMeAllCombinedAndMinifiedCssCode.css" rel="stylesheet" type="text/css" />

 --------------------------------------------------------------------------------------------------------------

instead of:

    <script type="text/javascript" language="javascript" src="JavaScript/js_file1.js"></script>
    <script type="text/javascript" language="javascript" src="JavaScript/js_file2.js"></script>
    <script type="text/javascript" language="javascript" src="JavaScript/js_file3.js"></script>

in html code shold be:

    <script type="text/javascript" language="javascript" src="GiveMeAllCombinedAndMinifiedScript.js"></script>

==============================================================

Is it clear now? Is it possible to do above by YUI Compressor?

Thank you!

 

Sep 6, 2010 at 5:29 AM

Hi purekrome,

Thanks for your response. We are using ASP.NET 3.5 forms MVC pattern. Our CSS and JS files are placed in the two separate folders in 'App_themes'  folder. We wish to use YUI compressor for .NET and want to minify and compress these files into one. Please, let me know how to do this. We are using VS 2008 for devlopment. Your help is much appreciated and thanks in advance.

 

Coordinator
Sep 6, 2010 at 5:39 AM

@ihorko hi mate - weird ... I didn't receive an email saying there's a new reply to this thread ... which was why I didn't reply. Soz. To answer your question : yep. :) Sure can. BUT there's always a caveat :( (more on this below).

@ram123456 hi again - you're scenario is very very similar to ihorko's .. which is good news.

Now @both of you .. before I explain what to do (sorry for dragging this on) .. both of you didn't mention HOW you are deploying your web app and WHEN you wish to have the CSS/JS minified/combined. For example, if you are on your own development machines (aka. localhost) ... when u hit 'Build-Solution' or 'Build-project' ... do you want to minify/combine your stuff then? or do you want to do it when you move the code to a dev server or some production server etc? The reason I ask this is because the solutions differ between HOW/WHEN ...

What I was doing was minification/combining the JS/CSS when my code was 'checked in' to the TFS source control and a TFS-Build auto-kicked off _and_ deployed the application to our dev server. Later on, when we asked TFS to make some production/release builds, it once more did a minification/combining.

So guys - when/how would u like to do this?

Sep 6, 2010 at 5:48 AM

Hi PureKrome,

Thanks for your immediate reply. As I am testing this in localhost, I would like to do the minification and compression of JS/CSS files when I hit on 'Build Solution'. Probably, I am expecting some steps to be followed or settings to be done in the post-build properties thro' VS. Hope this clarifies.

Coordinator
Sep 6, 2010 at 5:58 AM

Yep - sure does clarify. Time to crack open the video recording stuff .. and get some vid's up for people.

Quick question on this :: you do know that _every_ time you do a build, then this will do a js/css minification/combining .. which adds a tiny insy binsy bit extra time to compile? and btw.. it's not on a _solution_ level .. but when the MVC or Webforms app is 'built'. Does that make sense?

Lastly, you need to understand that some people wish to minify only .. and they minify the source file back OVER itself ... which in effect means, keep the same file, just minify the contents. That's a legit scenario (but i don't like it nor do that) and if you're in a source controlled environment, that (generally) won't work because the source files (ie. some css or js file) is usually readonly/locked. And secondly, if it's writable, you've just overwritten your nice verbose file with the minified one. But this might not apply to you .. so u might not have to worry about it.

Ok - off to make some vids. Be back later :)

VS2008 ... :( dang. where's my VPC ..... :P

Coordinator
Sep 6, 2010 at 8:19 AM
Edited Sep 7, 2010 at 1:19 AM

Disregard this post... new reply below


Ok gents.

i've uploaded a video here .. but the site compressed the frak out of it so it might be hard to watch. I'm trying to upload it to YouTube but i think it will fail because it's 17mins long :(~~

try that .. while i try another site. Keep me posted, please.

Sep 6, 2010 at 11:03 AM

Hello purekrome

Thanks for reply and your video!

I need to minify and combine css and js dynamically runtime unlike ram123456 when build button pressed. So it should not create me minified/combined files in folder on the disk.

So, last my example:

instead of:

    <script type="text/javascript" language="javascript" src="JavaScript/js_file1.js"></script>
    <script type="text/javascript" language="javascript" src="JavaScript/js_file2.js"></script>
    <script type="text/javascript" language="javascript" src="JavaScript/js_file3.js"></script>

in html code shold be:

    <script type="text/javascript" language="javascript" src="GiveMeAllCombinedAndMinifiedScript.js"></script>

it means that when you request the file by URL like : http://mysite.com/GiveMeAllCombinedAndMinifiedScript.js it should return minified script with content of all three files (js_file1.js, js_file2.js, js_file3.js),

in the folder on the site there are files (js_file1.js, js_file2.js, js_file3.js) but not GiveMeAllCombinedAndMinifiedScript.js (it can creates dynamically and tempopary only for request or so, GiveMeAllCombinedAndMinifiedScript.js in html rendered code - some fake name to say web-server that it should return content of all js files combined/minified by YUICompressor). it should combined and minified for every request for GiveMeAllCombinedAndMinifiedScript.js file (there we can use cache)

Thanks.

Sep 6, 2010 at 12:27 PM

Hi Purekrome,

Thanks for your efforts..But, can't watch this video from my office n/w. If you have any doc in place, can you plz share.

 

Coordinator
Sep 7, 2010 at 1:25 AM
Edited Sep 7, 2010 at 6:39 AM

Ok gents - take 2. 

I've re-done the video again, this time it clocks in at 11mins so it's now up on YouTube here . Go nuts :)

@ram123456 : if u can't watch videos/youtube, then check out the documentation i have here.

@ihorko Ok - now that's another edge case but more common. What you'll need to do is create your own HTTP Handler (asx file, i think they are called) and register it against any .css or .js file. That's the hard way :) The easy way is to goto here and use SquishIt by Justin Etheredge. That might be what you're after?

keep me posted, guys :)

Sep 7, 2010 at 5:24 AM

Seems that's what I need!

Thank you so much purekrome!

Coordinator
Sep 7, 2010 at 5:25 AM

pleasure :) (BTW, i believe SquishIt uses YUI Compressor .NET behind the scenes :) )

Sep 7, 2010 at 6:33 AM

Hi PureKrome,

Thanks for this..Youtube says video n/a..But, fine I can able to the comp with the doc link you provided..it helps..

Now, after compression how asp.net page works? For example, how the .js and .css file we referenced in .aspx pages will refer to the compressed file..little confused now..can you plz, throw some lights on this.. :-)

 

Coordinator
Sep 7, 2010 at 6:45 AM

Fixed the link to YT, btw :) And i added it to the front page.

re: the next step - how to refer to the .min.js or .min.css 

this is where you have to do some custom work. What we do is we have a setting in the web.config / web.debug.config / web.release.config files that has the name of the css/js file we want to use.

eg.

web.config

<appSettings>
    <add key="JavaScriptName" value="myJavaScript.js"/>
</appSettings>

web.debug.config/web.release.config

<appSettings>
    <add key="JavaScriptName" value="myJavaScript.min.js"/>
</appSettings>

 

and in your aspx code ...
<script type="text/javascript" src="/Scripts/<%=ConfigurationManager.AppSettings["JavaScriptName"]%>"></script>

 

Sep 15, 2010 at 6:25 AM

Hi Purekrome,

Thanks for all the efforts and the minification works like a gem!! Hat's off on this work..

BTW, I'm facing some problems for some of the .js files while minifying. It looks to me, that these .js files have 'debugger' statement which stops YUI minification process. Then, I tried to remove these statements and it works fine. Is this a bug or anything I am doing wrong here?

Would you please help me to resolve this?  Also, Is there a way that to make the YUI minfication process enable only in the Testing or release and not in the Dev envt?

Your help is much appreciated..

Coordinator
Sep 15, 2010 at 7:16 AM
Edited Sep 15, 2010 at 7:18 AM

Hi Ram - glad u're liking it .. and more importantly .. you might be using it for some real application :)

>> 'debugger' statements cause problems.

Yep - known issue. If you search for posts about it, you'll see that people are saying that it's an issue with the 'stock' yuicompressor code. As such, i'm porting the java code -> bugs and all. So u can't do anything about it until the root issues (out of my control) are fixed.

That said, someone said there is a possible workaround.

 

>> Minify for testing/release .. and not dev.

Sure can - the trick would be to edit the .csproj file again and add a CONFIGURATION conditional check. so only run that target if condition = RELEASE or (whatever your configurations are). NOTE: what's a configuration? That's the solutions RELEASE or DEBUG or <any other custom stuff, you've setup>

Ok - some code (cause i know you're shaking in your boots at editing the csproj file again)...

untested code .. but something like this should help ....

 

<Target Name="CompressJsAndCss" Condition="'$(Configuration)'=='Release|Testing'">
.... all the propertygroups and itemgroups and CompressorTasks are here ...
</Target>

 

So that target will ONLY run under the following conditions :: the Configuration value is either RELEASE or TESTING. Of course, u can have ANY variable tested as a condition ..
not just the baked in variables, like Configuration, etc...

 

HTH.