Sometimes you may come across very slow management applications, using lots of javascript plug-ins and css files. Today we try to find a better way to handle such files, even in older systems.

Network latency times, access to remote files and other similar operations cause time wastes, that can be critical, especially if many files are appended to your application pages, implying very slow answers from your applications.

One possible approach, when dealing with such problems, is to merge all the involved CSS files into one, taking into account the style overwriting order. In fact, even if a single file may be heavier for downloading purposes, than several smaller ones, you are really saving on latency and times for accessing multiple files. So in the end, it is possible to gain a meaningful time reduction.

By using a CDN and decreasing the total number of files, you would get a caching and versioning system much more simpler.

Now we will discuss how to join SS and Js files, using Grunt, a task manager developed in Javascript/NodeJS. This method is based on the integration of two plug-ins, grunt-contrib-jshin to manage Javascript files, and grunt-contrib-cssmin, to manage CSS files.

uglify: {
            my_target: {
                files: {
                    "<%= dest_path %>/output.min.js": [
                        "assets/js/jquery.min.js",
                        "assets/js/bootstrap-dropdown.js",
                        "assets/js/bootstrap.min.js"
                    ]
                }
            }
        },

This is a basic configuration to load several javascript files, obtaining as output a single file.

cssmin: {
            combine: {
                files: {
                    "<%= dest_path %>/output.min.css": [
                        "assets/css/bootstrap.min.css", 
                        "assets/css/bootstrap-responsive.min.css",
                        "assets/css/style.css"
                    ]
                }
            }
        }

This is the same for css files.

As you can see, the root of destination path is common and has been defined in the file header.

var config = {
        dest_path: "public/bin"
    }

This is the complete file, that you can use in your projects with suitable changes

module.exports = function ( grunt ) {
    require("load-grunt-tasks")(grunt);

    var config = {
        dest_path: "public/bin"
    }    

    var taskConfig = {
        uglify: {
            my_target: {
                files: {
                    "<%= dest_path %>/output.min.js": [
                        "assets/js/jquery.min.js",
                        "assets/js/bootstrap.min.js"
                    ]
                }
            }
        },
        cssmin: {
            combine: {
                files: {
                    "<%= dest_path %>/output.min.css": [
                        "assets/css/bootstrap.min.css", 
                        "assets/css/bootstrap-responsive.min.css",
                        "assets/css/style.css"
                    ]
                }
            }
        }
    };

    /**
     * Load configurations
     */
    grunt.initConfig( grunt.util._.extend(taskConfig, config));


    grunt.registerTask( "default", [ "uglify", "cssmin" ] );
}

Comments

comments powered by Disqus

cloudparty

Follow Us