ResourceRefresh is a small, unobtrusive JavaScript file that pings your development server for changes to your HTML, CSS and JavaScript files. As soon as you save a file, the changed file is injected/refreshed without you having to refresh your browser manually. Based on CSSrefresh v1.0.1 (Copyright (c) 2012 Fred Heusschen www.frebsite.nl)

resourceRefresh.js

/*  
 *  ResourceRefresh v0.1.0
 *
 *  Based on CSSrefresh v1.0.1 (Copyright (c) 2012 Fred Heusschen www.frebsite.nl)
 *
 *  Dual licensed under the MIT and GPL licenses.
 *  http://en.wikipedia.org/wiki/MIT_License
 *  http://en.wikipedia.org/wiki/GNU_General_Public_License
 */

(function() {

    var phpjs = {

        array_filter: function( arr, func )
        {
            var retObj = {}; 
            for ( var k in arr )
            {
                if ( func( arr[ k ] ) )
                {
                    retObj[ k ] = arr[ k ];
                }
            }
            return retObj;
        },
        filemtime: function( file )
        {
            var headers = this.get_headers( file, 1 );
            return ( headers && headers[ 'Last-Modified' ] && Date.parse( headers[ 'Last-Modified' ] ) / 1000 ) || false;
        },
        get_headers: function( url, format )
        {
            var req = window.ActiveXObject ? new ActiveXObject( 'Microsoft.XMLHTTP' ) : new XMLHttpRequest();
            if ( !req )
            {
                throw new Error('XMLHttpRequest not supported.');
            }

            var tmp, headers, pair, i, j = 0;

            try
            {
                req.open( 'HEAD', url, false );
                req.send( null ); 
                if ( req.readyState < 3 )
                {
                    return false;
                }
                tmp = req.getAllResponseHeaders();
                tmp = tmp.split( '\n' );
                tmp = this.array_filter( tmp, function( value )
                {
                    return value.toString().substring( 1 ) !== '';
                });
                headers = format ? {} : [];
    
                for ( i in tmp )
                {
                    if ( format )
                    {
                        pair = tmp[ i ].toString().split( ':' );
                        headers[ pair.splice( 0, 1 ) ] = pair.join( ':' ).substring( 1 );
                    }
                    else
                    {
                        headers[ j++ ] = tmp[ i ];
                    }
                }
    
                return headers;
            }
            catch ( err )
            {
                return false;
            }
        }
    };

    var resourceRefresh = function() {

        this.reloadFile = function( resources )
        {
            for ( var a = 0, l = resources.length; a < l; a++ )
            {
                var resource = resources[ a ],
                    newTime = phpjs.filemtime( this.getRandom( resource.url ) ),
                    tagName = resource.elem && resource.elem.tagName.toLowerCase();

                //  has been checked before
                if ( resource.last )
                {
                    //  has been changed
                    if ( resource.last != newTime )
                    {
                        //  reload
                        if (tagName === 'link') {
                            resource.elem.setAttribute( 'href', this.getRandom( resource.url ) );
                        }
                        else if (tagName === 'script') {
                            resource.elem.setAttribute( 'src', this.getRandom( resource.url ) );
                        }
                        else {
                            window.location.reload(true);
                        }
                    }
                }

                //  set last time checked
                resource.last = newTime;
            }
            setTimeout( function()
            {
                this.reloadFile( resources );
            }, 1000 );
        };

        this.getUrl = function( f, attr )
        {
            return f.getAttribute( attr ).split( '?' )[ 0 ];
        };
        this.getRandom = function( f )
        {
            return f + '?x=' + Math.random();
        };


        var getResources = function ( tagName, urlAttr ) {
            var files = document.getElementsByTagName(tagName),
                resources = [];
            for ( var a = 0, l = files.length; a < l; a++ )
            {           
                var elem = files[ a ];
                resources.push({
                    'elem' : elem,
                    'url' : this.getUrl( elem, urlAttr ),
                    'last' : false
                });
            }
            return resources;
        };

        var resources = getResources('link', 'href');
        resources = resources.concat(getResources('script', 'src'));
        resources.push({
            'url' : window.location.href,
            'last' : false
        });

        this.reloadFile( resources );
    };


    resourceRefresh();

})();