9

It has been a while since I have done any substantial web development and I'd like to take advantage of the latest practices but I'm struggling to visualize the workflow to incorporate everything.

Here's what I'm looking to use:

  • CakePHP framework
  • jsmin (JavaScript Minify)
  • SASS (Synctactically Awesome StyleSheets)
  • Git

CakePHP:

Pretty self explanatory, make modifications and update the source.

jsmin:

When you modify a script, do you manually run jsmin to output the new minified code, or would it be better to run a pre-commit hook that automatically generates jsmin outputs of javascript files that have changed. Assume that I have no knowledge of implementing commit hooks.

SASS:

I really like what SASS has to offer but I'm also aware that SASS code isn't supported by browsers by default so, at some point, the SASS code needs to be transformed to normal CSS. At what point in the workflow is this done.

Git

I'm terrified to admit it but, the last time I did any substantial web development, I didn't use SCM source control (IE, I did use source control but it consisted of a very detailed change log with backups).

I have since had plenty of experience using Git (as well as mercurial and SVN) for desktop development but I'm wondering how to best implement it for web development).

Is it common practice to implement a remote repository on the web host so I can push the changes directly to the production server, or is there some cross platform (windows/linux) tool that makes it easy to upload only changed files to the production server. Are there web hosting companies that make it eas to implement a remote repository, do I need SSH access, etc...

I know how to accomplish this on my own testing server with a remote repository with a separate remote tracking branch already but I've never done it on a remote production web hosting server before so I'm not aware of the options yet.

Extra:

I was considering implementing a javascript framework where separate javascript files used on a page are compiled into a single file for each page on the production server to limit the number of file downloads needed per page.

Does something like this already exist? Is there already an open source project out in the wild that implements something similar that I could use and contribute to?

Considering how paranoid web devs are about performance (and the fact that the number of file requests on a website is a big hit to performance) I'm guessing that there is some wizard hacker on the net who has already addressed this issue.

Improve this question

2 Answers 2

Reset to default
2

You could check out Google's PageSpeed extension for Apache: afaik, there is an option to aggregate and minify Javascript and CSS automatically and combined with caching, this would fit what you mention you're looking for at the end of your post.

Improve this answer
1
  • 1
    Cool, I didn't realize that all this could be done with one Apache module. Javascript/css minification, javascript/css concatenation, as well as bunch of other optional performance improvements. After some Googling I even found out that Dreamhost provides it with their shared/VPN hosting. I'm surprised there isn't more info about it on webmasters.stackexchange.com or stackoverflow.com.
    – Evan Plaice
    Jan 19, 2011 at 1:58
5

jsmin

If you don't have a ton of JS, you could set something up to minify every time you hit save. If you do have a lot of JS, make it part of your deployment process (see Git below).

SASS

Use the Compass Framework. It includes SASS, plus a little script that "watches" your SASS directory and compiles the files into CSS (including minified CSS, if you want) every time you save. It's built with RoR in mind, but you can easily use it with any web framework by creating a Compass config file and running the "compass watch" command. Compass also includes lots of other handy tools such as Blueprint, useful mixins and automatic sprite generation via the Lemonade plugin (which should be built into Compass in the next release).

Git

Depending on the size/complexity of the site, consider following the Capistrano deployment model. Not sure if you can use Capistrano directly with CakePHP, but the gist is this: each production server has a "current" folder which contains all the code that is running in production at that moment. Each time you want to deploy new code, you run a script which ssh's to each production server and has it (a) copy the contents of the "current" folder into a backup folder (with the release name/timestamp on it), (b) check out the latest code from Git into the "current" folder and (c) start serving this new code from the "current" folder. This way, you can roll back to any previous release if necessary and you can tell exactly which revision is live in production. Capistrano also lets you add all sorts of custom tasks as part of the deployment process, including JS/CSS minifaction, concatenation and so on.

Extra

Yes, there are a bunch. Google for something like "CSS/JS concat". Here is a quick one I found for CakePHP: Asset Packer.

Improve this answer
5
  • Thanks a lot for the input. I really like what I saw with the Compass Framework. I only wish I knew of a way to deploy it in PHP. I googled around but can't find an alternative. Capistrano also looks very interesting but instead of the expensive and fragile file copy model I'd just use ssh to tell the git client on all the remote servers to do a quick 'git pull --rebase' after checking that it worked on a testing server first.
    – Evan Plaice
    Feb 6, 2011 at 4:14
  • (cont) Asset packer also looks very interesting. The only reason I picked the other answer over yours was, it contained it all in one shot with the processing being done on the server itself (so no extra scripts needed). The only downside I see to pagespeed is the added processing of static content (which is easily addressed using static content caching and/or CDN. I really wish I could accept 2 because your answer has a lot of valuable information.
    – Evan Plaice
    Feb 6, 2011 at 4:46
  • You don't "deploy" the Compass framework with PHP. You just run it while you code, it compiles your CSS files every time you hit save, and the CSS files are what actually get deployed. To "run" compass, you first need to generate your config file (compass.rb) - use this to generate the command line options: jsfiddle.net/chriseppstein/PG46q/3 . Once you have the config file setup with all your paths, just run "compass watch" in the same folder as the config file, and compass will start recompiling your SASS every time you hit save. Try it on some side project: it's VERY easy & fast.
    – Yevgeniy Brikman
    Feb 6, 2011 at 9:05
  • Also, as far as I know, Capistrano doesn't do much copying. Each time you deploy, it checks out the latest code and just swaps folder names. The advantage is that you can always roll back to an earlier version by just swapping folder names again.
    – Yevgeniy Brikman
    Feb 6, 2011 at 9:09
  • I found an article on how to get it up and running within PHP. It's easier to use outside of a Ruby project than I expected. Scratch my last comment about Capistrano. I thought it was used to send a distributed command to multiple servers. If I have ssh access to the remote servers I'd much rather drop a git client as a means to pull the latest changes from the production branch. IMHO, folder swapping folders is a bad idea. I'd much prefer to tag revisions with in the release cycle and just checkout a previous tag if the current one has issues.
    – Evan Plaice
    Feb 10, 2011 at 2:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.