Grow your CSS skills. Land your dream job.

merging javascript in one

  • # April 1, 2013 at 2:05 am

    i wonder if anyone can give me the example where multiple .js files are merged in one .js file so that the source code dont look bulky and page load fast….i have used ddsmoothmenu.js, cufon.js, slides.min.jquery.js, jquery.jcarousel.min.js

    # April 1, 2013 at 7:30 am

    You can use RequireJS which basically calls all JS files from a specified path. For example, if all those files you mentioned are inside a folder named “scripts” and the file inside is named “main.js” you can use the following code:


    <script data-main="scripts/main.js" src="scripts/require.js"></script>

    Then you call the rest of the JS files inside “main.js” -


    requirejs.config({
    //By default load any module IDs from js/lib
    baseUrl: 'js/lib',
    //except, if the module ID starts with "app",
    //load it from the js/app directory. paths
    //config is relative to the baseUrl, and
    //never includes a ".js" extension since
    //the paths config could be for a directory.
    paths: {
    main: '../main'
    }
    });

    Read this documnetation here on how to call your JS files accordingly.

    __

    Else, if you want to merge them, just put all the code from each file in to one and compress that file for optimization. Be careful doing this though as it could cause some conflicts and to be fair, I’ve never gone down this route, so maybe someone else could clear things up if that doesn’t work :0)

    # April 2, 2013 at 3:37 am

    @JamesMD; Thnks!

    # April 2, 2013 at 4:20 am

    Yep, you can just copy and paste all of the scripts into one file. I usually do this by leaving a line space in between each script, so I can see where each one starts and ends. This way, you can make sure everything’s working well before you minimize the whole thing into one big chuck. Good luck!

    # April 2, 2013 at 8:53 am

    I actually use [Yeoman](http://yeoman.io/) (or probably, technically, [Grunt](http://gruntjs.com/)) to deal with all the pesky bits of concatenating and minifying scripts (as well as linting, etc).

    Using the yeoman webapp init I get a nice base index.html to work in, and when I build it gets nicely built together and then uglified.

    # April 2, 2013 at 1:37 pm

    Once they are all in one file, don’t forget to compress! I use this: http://refresh-sf.com/yui/

    # April 3, 2013 at 12:53 am

    thank you all for your suggestion!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".