Concatenating CSS and JS prior to compressing? Tools? Best Practices?

Question

I'm working on a one-page site that is incorporating about a dozen .js files and and maybe a half dozen .css files.

Most of the .js files are jQuery plugins. Aside from a base css file, the CSS files are for the corresponding jQuery plugins.

YUI Compressor seems to be a favorite for compressing CSS and JS files. However, it only compresses individual files.

I'd also like to combine my files and (ideally) end up with one .js and one .css file (both compressed).

Are there any preferred tools out there that allow you to automate the combining of the .js and .css files into one file so it can then be run through YUI compressor?

Answer 1

I ended up stumbling upon this option:

http://johannburkard.de/blog/programming/javascript/automate-javascript-compression-with-yui-compressor-and-packer.html

It's a batch file that combines local versions of concatenation, YUI Compressor and Dean Edward's Packer.

In the end, though, I couldn't get Packer to work locally. It kept corrupting my .js.

So, I skipped that part and then ran my YUI Compressed code through the online Packer and only saw a 1% further increase in compression, so just omitted the Packer stage.

In the end, my solution used the above linked instructions with slightly modified batch file:

type ..\js-in* > jb.js java -jar ..\yui\build\yuicompressor-2.4.2.jar jb.js -o jb-yui.js

Thanks for all the other (valid) solutions as well. Lots of good info!

Answer 2

If you know a little, php, I have found this to be the best way: http://www.thedanglybits.com/2007/06/21/minify-your-external-javascript-and-css-with-php/

Answer 3

You might want to check out sprockets (http://www.getsprockets.com/).

Answer 4

I was asking this question only the other day. After tiring of scouring the web, I came up with this hackish (windows batch file) solution.

@echo off
set TUNA_ROOT=C:\path\to\webroot
set YUI_COMPRESSOR_PATH=C:\path\to\yuicompressor-2.4.2\build
set TEMP_JS_FILE=%TUNA_ROOT%\scripts\all_scripts_temp.js
set OUTPUT_JS_FILE=%TUNA_ROOT%\scripts\tuna_min.js
if exist "%TEMP_JS_FILE%" del "%TEMP_JS_FILE%"
if exist "%OUTPUT_JS_FILE%" del "%OUTPUT_JS_FILE%"
type "%TUNA_ROOT%\Scripts\MicrosoftAjax.js" >> "%TEMP_JS_FILE%"
echo. >> "%TEMP_JS_FILE%"
echo. >> "%TEMP_JS_FILE%"
type "%TUNA_ROOT%\Scripts\MicrosoftMvcAjax.js" >> "%TEMP_JS_FILE%"
echo. >> "%TEMP_JS_FILE%"
echo. >> "%TEMP_JS_FILE%"
rem ...and so on...
java -jar "%YUI_COMPRESSOR_PATH%\yuicompressor-2.4.2.jar" -v --charset utf-8 -o "%OUTPUT_JS_FILE%" "%TEMP_JS_FILE%"
if exist "%TEMP_JS_FILE%" del "%TEMP_JS_FILE%"

but I'd really love it if there were a more automated way of doing things.

Answer 5

I use this site almost exclusively to compress my JS and CSS files:
http://www.lotterypost.com/js-compress.aspx
http://www.lotterypost.com/css-compress.aspx