Visualforce Static Resource Alternative

Typically, a web site will reference some standard libraries for JavaScript (ex. jQuery) and CSS (ex. 960 Grid), and then have an additional set of scripts and styles to customize the site itself. 

Static Resources in Force.com allow you uploaded scripts, stylesheets and images for reference in your Visualforce pages. It's a great function in that it caches the resources to speed up page access and also allows you upload assets as ZIP files and preserve the folder structure within the ZIP file for relative path references (very useful when you point at images in your stylesheets).

The downside of Static Resources is the time it takes to change them when you are actively developing stylesheets or scripts for a Force.com Site. The typical process is this:

1. Work on a JavaScript or CSS file in Eclipse or your favorite text editor.
2. Go to the "Static Resources" view in your Salesforce.com org.
3. "Edit" the static resource.
4. Upload the new version of the file.
5. Test the changes.
6. Repeat.

Even though that process only takes a minute, having to do it over and over again with every change gets old - fast.

A great feature in Visualforce is the ability to define a content type that a Visualforce page outputs itself as. Typically, this ends up being "text/html", but you can change this to anything you want, specifically "text/javascript" or "text/css" for our purposes. By doing this, you can now work on Visualforce pages in the Force.com IDE that represent the custom JavaScript and CSS for your site and use the much-less-time-consuming process of saving a VF page to the server vs. uploading a new static resource.

To do this, you need to create a new VF page and reference it accordingly. Let's work through a JavaScript page (the process would be the essentially same for a CSS file):

1. Create a new Visualforce Page in the Force.com IDE. Name it "Script". You'll end up with a new "Script.page" file
2. Add the "contentType" attribute to the <apex:page /> tag at the top of the file and set it's value to "text/javascript".
3. Add the "cache" attribute to the <apex:page /> tag at the top of the file and set it's value to "false". This is critical to ensure your changes are reflected immediately.
4. Add the "expires" attribute to the <apex:page /> tag at the top of the file and set it's value to "0". This is also critical to ensure your changes are reflected immediately.
5. Start writing javascript between the <apex:page /> tags like you would in a typical .js file.
   
6. The final product should look like this:
   

   <apex:page contentType="text/javascript" cache="false" expires="0">
   function MyScript() {
        alert('Yahoo! No more static resource uploads!);
   }
   </apex:page>

7. Reference your new JavaScript file in your other Visualforce pages:
   

   <apex:includeScript value="{!$Page.Script}" />

Much more efficient that the static resource upload jig! Of course, when all of your heavy development is done, I would suggest either a) turning on caching or b) creating a final .js file and uploading it as a static resource to take advantage of Force.com Sites' caching mechanisms.