Prevent JS and CSS caching during deployment

Hi guys, as you know, while moving changes to the production server very often we need to flush CSS or JS cache on the client’s side, as without this action clients will see broken design or, in case with JS cache, might get broken functionality. Therefore, we guess it is a good idea to describe how to prevent JS/CSS caching.
In this case, the simplest solution for this challenge is file renaming, but this way is not very nice, so we would like to find out the alternative solution.

When we get deal with JS file it is only needed to add after file name the following chars “?1”, look through example:

<reference name="head">
    <action method="addJs"><script>atwix/test.js?1</script></action>
</reference>

But we can’t apply this way for CSS cache, as Magento doesn’t want to include CSS file described that way (since Magento only checks for file existing but can’t find the file with regular file name plus extra symbols).

That’s why it is necessary to find how to implement it without file renaming. The first way can be enabling merging of CSS. Then, you just clear the cache and a new merged file will be created with a new file name (this ability can be found here: System -> Configuration -> Developer -> CSS settings -> Merge CSS Files ).  But as far as we know, the hash code of the merged CSS file stays the same even if the underlying files changed – but only when the new files are added to the set of merged files, the hash changes. So, that way is not applicable especially you just changed existing file.

Let’s check another way – it is when instead of using layout.xml, we just put them in our page/html/head.phtml or, create a block that contains the <style> tag with version number and put it in the XML in our head – so we can have it load in only specific pages and still sticking to using the XML layouts. We guess that it’s not very helpful either, so we have found one more solution. We need to create our own functionality that allows to include the CSS file with revision number. First of all, we should create block, thus you can check the following code:

class Atwix_Css_Block_Test extends Mage_Core_Block_Text
{
    /** @var string Current theme url */
    private $_url;

    /**
     * Get current theme url
     */
    public function _construct()
    {
        $this->_url = Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_SKIN) .
            'frontend' . DS .
            Mage::getSingleton('core/design_package')->getPackageName() . DS .
            Mage::getDesign()->getTheme('frontend') . DS;
    }

    /**
     * Generate code that is needed to insert into head block
     * 
     * @param $file string file name
     */
    public function setCss($file)
    {
        $this->setText('<link rel="stylesheet" type="text/css" href="' . $this->_url . $file . '" media="all"/>');
    }
}

then, you should use the functionality of this block in your layout, see the following code as well:

<reference name="head">
    <block type="atwixcss/test" name="test">
        <action method="setCss">
            <css><![CDATA[atwix/test.css?1]]></css>
        </action>
    </block>
</reference>

That’s it, after all steps you can just change the revision number when your CSS/JS-file has been edited.
At the same time, you are able to use different modules that allow to rule CSS/JS files, in this case, you will find them on the Magento website.

Hope this article will be helpful. Good luck!