Boost the performance of your mobile web app using YUI Compressor

cat ../www/js/one.js ../www/js/two.js ../www/js/three.js > ../www/js/combined.js cat ../www/css/one.css ../www/css/two.css > ../www/css/combined.css

These two commands create two new files, combined.js and combined.css, each holding the contents of the JavaScript and CSS files, respectively. With that, we are now ready to give the YUI Compressor something to…well…compress.

Minification

Now we can send YUI Compressor to work to give us a nicely minified JavaScript and CSS files:

java -jar ../tools/yuicompressor-2.4.2/build/yuicompressor-2.4.2.jar -o ../www/js/bikenav.min.js ../www/js/combined.js java -jar ../tools/yuicompressor-2.4.2/build/yuicompressor-2.4.2.jar -o ../www/css/bikenav.min.css ../www/css/combined.css

This will create bikenav.min.js and bikenav.min.css in their respective directories, based on the concatenated files created in the previous step. With some additional output and commenting as well as deleting the concatenated files after minification (since we don’t need them any more after that) the final bikenav_build.sh script looks like this:

#!/bin/bash echo "Custom BikeNav build script" echo "===========================" echo "Step 1: rsync files from web directory" rsync -avz --exclude 'index.html' --delete ~/Webroot/BikeNav/ ../www/ echo "Step 2: minify JavaScript and CSS files" echo "=== JavaScript ===" echo "concatinating files" cat ../www/js/one.js ../www/js/two.js ../www/js/three.js > ../www/js/combined.js echo "minifying files" java -jar ../tools/yuicompressor-2.4.2/build/yuicompressor-2.4.2.jar -o ../www/js/bikenav.min.js ../www/js/combined.js echo "removing combined.js" rm ../www/js/combined.js echo "=== CSS ===" echo "concatinating files" cat ../www/css/one.css ../www/css/two.css > ../www/css/combined.css echo "minifying files" java -jar ../tools/yuicompressor-2.4.2/build/yuicompressor-2.4.2.jar -o ../www/css/bikenav.min.css ../www/css/combined.css echo "removing combined.css" rm ../www/css/combined.css

Step 4: Integration into iOS Build Settings

Now that we got our build script ready, we need to integrate it into the build process of our project in Xcode. The following instructions are based on the Xcode 4 user interface.

  1. After opening the project, make sure that the “Project Navigator” view is selected
  2. Select the top level project, in my case it would be BikeNav
  3. In the project editor window, select the target, BikeNav in my case
  4. Select “Build Phases”
  5. In the lower right corner, select the + sign labeled “Add Build Phase” and select “Add Run Script”

After going through these steps, a new bar in the sequence of Build Phases will show up labeled “Run Script”. Because we want to run our build script before any data is copied onto the simulator or device, we need to move it up in the sequence (I put it right after “Target Dependencies”). Now we only need to specify the path to the build script and how to run it. Therefor, in the text area inside that “Run Script” phase, I put the following:

cd /Users/komenda/Documents/PhoneGapApps/BikeNav2/scripts ./bikenav_build.sh

For better illustration, have a look at this screenshot, showing how that “Build Phase” section should look like after you added our build script.

Step 5: Testing

To test whether everything works correctly, build and run your project either on the iOS Simulator or an actual device. To verify that the script is being run, select the “Log Navigator” in the Xcode UI and then “Build [Projectname]” in the left sidebar. In the “Build target [projectname]” section in the log output you should see an entry “Run custom shell script ‘Run Script’”, which should show the familiar commenting messages we put in the shell script.

As a sidenote, of course in order to use the minified files, these need to be properly referenced in the index.html of your project.

Page 2 of 2 | Previous page

Leave a comment