I want to use YUI Compressor (the original) and use it as part of typical MS build processes (Visual Studio 2008, MSBuild).
Does anyone have any guidance or thoughts on
I use both. The YUI compressor is command-line, and easy to integrate into any build process. I got it running in rake with no problems.
It's probably most common to perform the javascript/css compression in-place when you deploy. That way you don't have to update JS references. But I'm using another method on my site. I have the compressed files created as *-min.js
, etc. To include a script or css file on my page, I call a server-side method:
<%= ScriptSrc("~/assets/myscript.js") %>
<%= LinkSrc("~/assets/main.css") %>
These methods do the following:
In debug mode, ScriptSrc
might output something like this:
<script type="text/javascript" src="http://stage.myapp.com/assets/myscript.js?v=1.2" ></script>
but in production it would load the minified version:
<script type="text/javascript" src="http://stage.myapp.com/assets/myscript-min.js?v=1.2" ></script>
One of the benefits of this is that I can switch between the full and minified versions just by changing the web.config
, which can aid debugging.
Please reference this article: How to use Visual Studio's Post-build Event with YUI Compressor for .NET
Because the YUI Compressor is simply a command line tool, you could call it as part of a Pre or Post Build action. (If you delve deep enough into MSBuild, you can let it run only when the files have changed, speeding up your regular builds; VS is pretty lenient when it comes to customized MSBuild actions in your project file.)
You could use Gabe's answer as a guideline on how to develop using such a setup; you could also during the Render
of, say, a master page translate all non-minified url's in your <head>
with minified url's (a little tricky though, as <script>
tags will show up in the middle of the Text
property of LiteralControl
s).
I've used compiler directives for my script includes- for example (in the master page);
...
<% #if RELEASE %>
<script src="Scripts/combined.min.js" type="text/javascript"></script>
<% #else %>
<script src="Scripts/myscript1.js" type="text/javascript"></script>
<script src="Scripts/myscript2.js" type="text/javascript"></script>
<% #endif %>
</body>
</html>
Then in the build process my various .js files are combined all into one conbined.min.js file.