Needed - Visual Studio Custom Build Actions To Minify JS and CSS

Question

I've been using Combres in my applications to compress, combine and minify my javascript and css at run time. This works extremely well and satisfies YSlow perfectly.

Now I'm rethinking the whole process for performance reasons, and I'm more so thinking about doing all of this at build time instead of run time.

I'm hoping that I can get a little advice on how to do this without too much hassle. Is there an existing tool (similar to Combres) that can do what I need?

score 13 · Answer 1 · answered Oct 13 '10 at 03:27

Meet Chirpy

alt text

Chirpy Mashes, minifies, and validates your javascript, stylesheet, and dotless files.

Chirpy is chippy. Use Google Closure Tools or YUI Compressor for .Net to minify and mash all of your precious assets. It's easy, it's flexible, and it's automatic.

More info here or on the CodePlex site

mga911 · Answer 2 · 2010-10-11T17:51:14.970

4

The MSBuild Community Tasks Project has a JSCompress task. Check out the project here: http://msbuildtasks.tigris.org/

Here's another resource on how to actually implement this task: http://www.justise.com/2007/04/20/javascript-and-css-compression-in-msbuild/

edited Oct 11 '10 at 17:51

answered Oct 11 '10 at 17:35

mga911

1,536
1
16
33

Now I don't have a "build machine" per se, but rather just my development machine. Will these suggestions still work? – Chase Florell Oct 11 '10 at 23:12
PS, I've very new to custom build stuff... in fact, I've never done it. – Chase Florell Oct 12 '10 at 01:34
1

Yes, the build script is run every time you compile your project no matter the configuration. I was new to it too not to long ago. Its kind of a set it and forget it kind of thing. So I feel like I'm new to it if I ever have to make a change. – mga911 Oct 12 '10 at 20:19

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

I originally used Chirpy to do my bundling, but have since moved over to Bundler. Bundler allows me to wire everything up nicely in a sexy build file (powershell) with relative ease. I've personally moved away from Visual Studio Build events, and started running the builds in a stand alone environment. This helps me with things like Github to Team City Continuous Integration (CI).

Here's what your build file "could" look like. (note might not fully run, this is untested)

build.ps1

# Set up varriables for build script
$invocation = (Get-Variable MyInvocation).Value
$directorypath = Split-Path $invocation.MyCommand.Path
$BundlerDir = "$directorypath\build_tools\bundler\"
$AppRoot = "$directorypath\SomeApp.Web\"   
$ScriptsDir = "scripts\"                                   
$CssDir = "css\"                  

# Run Bundler to Combine and Minify
&($BundlerDir + "node.exe") ( $BundlerDir + "bundler.js") ($AppRoot +$CssDir) ($AppRoot + $ScriptsDir)

# Everything else...
#    Clean the bins
#    Build the projects
#    Run the tests

score 0 · Answer 4 · answered Jul 11 '12 at 12:18

0

You could also take at look at ajaxtoolkit they have 2 tasks for compression of JS.

answered Jul 11 '12 at 12:18

Peter

37,042
39
142
198

Needed - Visual Studio Custom Build Actions To Minify JS and CSS

4 Answers4

build.ps1