Wednesday 27 June 2012

Rapid CSS & JS Updates

When tinkering with JavaScript or Styling it is imperative to quickly be able to see your changes, where one obvious option would be to find your css or js in the hive folder and modify it directly, you could potentially loose a lot of work with a small oversight. What I like to do is make a batch file to overwrite my JavaScript and CSS in the hive with the files from my development folders, this way all i have to do is save and run my batch file to update CSS and JS.

to make a batch file just right click on your desktop and create a new text file.
find the path where your development CSS or JS file resides

C:\Users\Administrator\Documents\Visual Studio 2010\Projects\Sharepoint Console\Mobile.MasterPage\Layouts\Mobile.MasterPage

then find where it deploys to in the hive 14 folder

C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\Mobile.MasterPage\

using the command xcopy with a switch /y you should end up with

xcopy "C:\Users\Administrator\Documents\Visual Studio 2010\Projects\Sharepoint Console\Mobile.MasterPage\Layouts\Mobile.MasterPage" "C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\Mobile.MasterPage\" /y

save your text file with the extension .bat

now when you run your batch file it should copy everything from one directory to the other overwriting the changes, and hence saving you the bother of deploying your solution to see simple client side scripting and branding changes.

make sure to hold ctrl + f + f5 in firefox when you refresh your page to grab the latest CSS and JS files