Go to content
Blog / Tools /

jQuery custom build

Ok, jQuery doesn’t need any presentation.

I really like it; it has simplified a lot my work… BUT sometimes its almost 100Kb of sweetness are a price we can not pay. If this is the case a good trade-off between light weight pages and all the goodness of jQuery, is to use a custom build of jQuery.

Custom builds allow to choose what features of jQuery are to be included in the minified file, and which not; perhaps you are working on a project and you are sure you’ll never have to do an asynchronous request? Well you could absolutely renounce at the AJAX module of jQuery. Renounce at the unused features allows an important saving in terms of jQuery’s weight. So, now the question is: “How could I made my custom build?”.

Setup operations

Before you can start there are a few things you have to install in your system.

You can install Grunt also via npm, typing in your system shell:

npm install -g grunt-cli

Get jQuery

Now that you’ve installed Git, you could use it to clone a copy of jQuery from its repository on GitHub. So in the Git shell, you have to type the following commands:

cd C:/path/to/your/repo
git clone git://github.com/jquery/jquery.git

Build jQuery

Now that you’ve the code from the jQuery repository on your hard disk, open the shell in the root folder of jQuery and run the following command to install the Node dependencies.

npm install

If everything works fine, now you should be able to build jQuery from your machine. Take the Git shell in the jquery source folder and run the simple command:

grunt

If everything is ok, a new folder dist will be created, and inside this folder you can find the jQuery source code. What you’ve gotten is the official jQuery release. To customize your jQuery build you need a final step.

Customize jQuery

Make a custom build of jQuery is not much different from build jQuery; we’ve still to use the grunt command, but we’ve also to specify some optional parameters. In particular we need to set the custom option:

grunt custom:-ajax

In particular this command allows to build jQuery without its ajax module, that normally allows to make asynchronous requests. Moreover, the system is smart enough that it won’t include others modules which depend from the ajax module.

Currently jQuery consists of the following modules:

  • ajax
  • ajax/xhr
  • ajax/script
  • ajax/jsonp
  • css
  • deprecated
  • dimensions
  • effects
  • event-alias
  • offset
  • sizzle

And all can be stripped away from our custom builds.