Blog

«
»

Loading Different Javascript/CSS Files in Different Environments

by Matt Daum

Today we were working on minifying our Javascript and CSS files for a site we are launching tomorrow.  We came across that we didn’t want to have to get the repository out of sync and update view.yml to only include our single CSS style sheet and one javascript file when working between developement environment and production.  What we wanted was the following in view.yml the javascripts: and stylesheets: parameters to change depending on what environment you are loading, however using prod: and dev: in this didn’t work like app.yml does.  An example of this would be:

all:
  title: My site
dev:
  stylesheets:[styleone.css,styletwo.css,stylethree.css]
  javascripts:[one.js,two.js,three.js]
prod:
  stylesheets:[style.min.css]
  javascripts:[main.min.js]

This way we could have them load in production much quicker and reduce load time, however still easily debug the files in development environments.  After looking around a bit we couldn’t find any standard current solution so we came up with the following.  In app.yml we defined two variables for the dev and production environments – javascript_files and css_files.  Here you put the list of the files you wanted to loaded in each environment.  Then in view.yml it now looks like:

all:
  title: My Title
  stylesheets: [<?php echo sfConfig::get('app_css_files');?>]
  javascripts: [<?php echo sfConfig::get('app_javascript_files');?>]

The configuration variables get their value depending on the environment you are running in so it loads the proper files.  With this configuration we can easily debug in development environment and still have minified versions of the CSS and Javascript in production environement.   Hopefully this will save some of you time and make your life easier.

Tags: , ,

This entry was posted on Tuesday, June 9th, 2009 at 10:44 pm and is filed under General. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

3 Responses to “Loading Different Javascript/CSS Files in Different Environments”

  1. Enrico Stahn Says:
    June 10th, 2009 at 12:53 am

    Hey Matt,

    how do you handle changed css or javascript files to get them minified. Has every developer do it by himself and check it into the repository or do you have a svn hook or some kind of automatism to handle this process.

    Kind Regards
    Enrico Stahn

  2. David Brewer Says:
    June 10th, 2009 at 9:21 am

    I ran into the same problem a few months ago and filed a feature request ticket: http://trac.symfony-project.org/ticket/5910.

    My workaround was to use a filter to insert the appropriate settings based on environment — but I think your workaround is much more straightforward! Thanks, I’ll be using this on my next project.

  3. Matt Daum Says:
    June 14th, 2009 at 7:02 pm

    Hi Enrico-

    Currently we just have a script in which we build the minified CSS and JS files since sometimes if we push something we do not want the minified files to change until the push is made final. You could definitely work up something to automate it with a hook on your SCM. That’d be the easiest way I think to keep the minified versions up to date.

Leave a Reply