Javascript minification along with automated deployment

Javascript compression has always been a great concern specially for interactive web applications where you will have lot of javascripts with lot of ajax requests. And as the ultimate target is to make your user happy with faster response, its better to squeeze your javascript files as much as possible. If possible reduce the number of files as well. Lots of advices are available to make your web sites faster enough as if users are working in desktop application. A good guideline can be found here.

Besides we also need such a convenient way so that we can have this minification process as a part of our deployment. Some kind of automation I meant.
Well we have found JS min very useful regarding all the above concerns. It gives pretty much good ratio of compression for js files compare to some contemporary minification processes. And in ruby you will have a rake task to make the minification process totally automated.

In scrumpad we used JS-min with little bit tweaked. Here I will tell how we managed our some numbers of js files in both development and production mode from a single point.

Say we have following files for application: prototype.js, effects.js, dragdrop.js, application.js ( These files may be used all over the application )
and some more js files for our calendar: calendar.js, date_format.js ( These files will be used at some places )

Then we made the following hash in our environement file:

module JsFiles
    COMMON_FILE = {:min_file => 'common.js', :normal_files => ['effects','dragdrop','prototype','application']}

    CALENDAR = {:min_file => 'calendar-min.js',
        :normal_files => ['calendar', 'date_format']}
end

Keeping these hashes in a module facilitates us in some ways. We will look at those as move downwards.

The rake task provided here is modified according to our requirments:

task :min => :environment do
    # list of files to minify from JsFiles module
    libs = Array.new
    JsFiles.constants.each do |file|
        libs << eval("JsFiles::#{file}")
    end

    # paths to jsmin script and final minified file
    jsmin = 'script/jsmin.rb'

    libs.each do |lib|
        final = "public/javascripts/min/#{lib[:min_file]}"
        files = lib[:normal_files].collect { |file| "public/javascripts/#{file}.js"  }

        # create single tmp js file
        tmp = Tempfile.open("temp_#{lib[:min_file]}")
        files.each {|file| open(file) {|f| tmp.write(f.read) } }
        tmp.rewind

        # minify file
        %x[ruby #{jsmin} < #{tmp.path} > #{final}]
        puts "\n#{final}"
    end
end

Now adding a rake task "js:min" in our deployment script will do all the minification jobs at the time of deployment and put the minified files in javascripts/min/ folder.

Great! Now as we are ready with our minified files all we need to do just include the correct files depending of the environment. We want to load the minified files in only production environment. For this we used in our application layout.

Of course in this function we decide which files should be included depending on the environment.

def include_environmental_js(js_file)
    if ENV['RAILS_ENV'] == 'development'
        return javascript_include_tag(js_file[:normal_files])
    else
        return javascript_include_tag("min/#{js_file[:min_file]}")
    end
end

Wherever you need to add the calendar files just use like
Thats it. Develop your application adding new javascript codes and files and just put the file names in you JsFiles module and deploy. You will see your production server sending all js files minified. I hope you already got to see how the module JsFiles helped to keep the code simpler and more DRY.

Any comments and suggestions are most welcome.

Comments

Popular posts from this blog

Ajax form submission with tiny MCE editor

Samsung BADA, A new era of Samsung smart phones begins

Samsung BADA, Starting with sample application