videos

How to Build Your Own Custom jQuery

on Sep 11th 2012 with 32 comments
Tutorial Details
  • Difficulty: Intermediate
  • Completion Time: 5 Minutes

In this quick tip screencast, I’m going to show you a trick that I bet you don’t know about. Did you know that, as of jQuery 1.8, you can now build a custom version of the library?

Why Would You?

Imagine that you’re working on a relatively simple project that doesn’t have any need for jQuery’s AJAX or CSS capabilities? Well, in these cases, it sure is a shame to keep all of that code in the library, if you’re never going to need it.

That’s where custom builds come in. By merely running a couple of commands, you can specify that your custom version of jQuery should exclude those two modules.

Give me a few minutes, and I’ll show you how!

Choose 720p for the clearest picture.

Show Links

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Ivo Trompert

    Great tip, thank you

  • http://www.gilbertdesignweb.com Philippe Gilbert

    I don’t think it’s really helpful to custom build each time as the full minimized thing is only 19Kb only one time, and if you use CDN, most of the time it’s already in the cache… Good presentation though!

    • http://www.gilbertdesignweb.com Philippe Gilbert

      Sorry, 32Kb

    • http://en.gs/ ENGS

      Less JS === Good! Consider the parsing times too, especially when there’s a lot of other JavaScript there.

      But yes; it’s not always terribly important for every case. Good for pedants like me ;P

  • Jeff Winters

    Note that your “gruntjs.com” link gets a “not found” error message.
    You apparently forgot the “http://”

  • ian

    Nice. I was looking for a way to shrink jquery once for a mobile site that was running on a bluetooth device and needed to be as small as possible because of network speed. I found https://github.com/zgrossbart/jslim but never got around to trying it out.

    Good to know how to use grunt for this.

    Note for windows:
    The readme at https://github.com/cowboy/grunt says windows users may need to use grunt.cmd instead of grunt. I also had to change line 233 in grunt.js to grunt.cmd to make the custom task work. Alternatively you can skip the custom task and just use the longer syntax from the comment on line 228
    grunt.cmd build:*:*:+ajax

    • ian

      oops meant to do -ajax there.

  • http://www.markus-schober.at Markus Schober

    A little bit Off-Topic here…
    Which Terminal-App do you use in the screencast?

  • Patrick

    Hi Jeffrey,
    can you tell me which terminal you use and how did the design for the input and output?

  • Salvatore

    I really hope in a “jQuery UI like” version of the custom build

  • http://www.crisialu.co.uk/ David Hughes

    Interesting to see a little of how jQuery source code is organised and compiled – I wasn’t aware of the existence of Grunt until I watched this – but I can’t help but question, as someone else has already done, whether trying to optimise your jQuery library like this is a constructive use of one’s precious time, given that anyone who has been using the internet with JS enabled is highly likely to have a copy of Google’s CDN version of JavaScript cached already.

  • Hanush H Nair

    I know that all the way.. ;)

  • http://www.perisicdesigns.com Stevo

    Thanks! Great tip! Jeffrey can you do the same for jQuery Mobile?

  • Kalman Hazins

    Nice tip!

    A few words of caution though.

    Just because your application is not using a certain module TODAY – does not mean that you should yank it out. Also, what does this do to a new web developer who comes onto your project who is expecting jquery to have ajax out of the box? He will probably waste his time figuring out that THIS build does not have it and that he needs to rebuild. Also, if a browser already got the latest version of jquery from some CDN and cached it – it will probably need to refetch this customized jquery file – so are you really saving the user any bandwidth? Not necessarily.

  • http://bizflame.com vrushank

    Thanks for the great tutorial. I will surely be using this from my next projects.

  • thirdender

    Wondering if this speeds up loading time for devices with less CPU power (smartphones and the like) by cutting through some cruft. Still, wonder if that versus CDN loading time makes a difference. Also, I’ve been meaning to play with Zepto.js (http://zeptojs.com/) for much the same reason (strives to emulate jQuery’s methods but without any IE support code, weighs in at 8.4kb gzipped).

  • ionut

    This is nice to know! Thank you!

  • http://www.soulsanctuarymusic.com Soul Sanctuary – British Heavy Metal

    My knowledge of Jq and Js is very limited but this video was really helpful. Thank you :)

  • http://www.simonsimcity.net Simon Schick

    May this look quite obvious to you … where can I get a list of modules that I can extract?
    I suggest the keywords are the filenames inside the src-folder of the git-repository, right?

  • http://www.brookswebdesign.net Maria

    Nice tip! Nice to shrink jquery to just what I need.

  • http://www.goserverside.com John Doe

    It’s really cool feature and nice screen cast… there should be more options to reduce the code not only ajax and css.

  • https://www.facebook.com/nisar5071 Nisar

    Nice tut

  • http://www.graphicexpertsonline.com/ hasan

    super tutorials…….thanks to share.

  • http://www.webgeekshub.com Jaimin Vaja

    @Jeff : you are amazing! Thanks a lot!

  • Jan
    • Pablo

      Thanks Jeff, great to know how.

  • Jan
  • http://www.facebook.com/mittul.chauhan Mittul Chauhan

    very useful in deed. thanks a lot

  • Degradator

    I delete all empty rows and all comment rows and all tab symbols. After it library lost 90 kb. There is attachment http://www.html.by/threads/29146-Rezhem-Jquery?p=164209#post164209 , but unfortunatly it’s russian forum.