If we feel so inclined, we can really push the boat out and build a custom version of jQuery using the JavaScript task runner, Grunt. The process is relatively straightforward but involves a few steps; it will certainly help if you have some prior familiarity with Git!
Note
The demo assumes that you have already installed Node.js—if you haven't, then you will need to do this first before continuing with the exercise.
Okay, let's make a start by performing the following steps:
You first need to install Grunt if it isn't already present on your system—bring up the Node.js command prompt and enter this command:
npm install -g grunt-cliNext, install Git—for this, browse to http://msysgit.github.io/ in order to download the package.
Double-click on the setup file to launch the wizard, accepting all the defaults is sufficient for our needs.
Note
If you want more information on how to install Git, head over and take a look at https://github.com/msysgit/msysgit/wiki/InstallMSysGit for more details.
Once Git is installed, change to the
jqueryfolder from within the command prompt and enter this command to download and install the dependencies needed to build jQuery:npm installThe final stage of the build process is to build the library into the file we all know and love; from the same command prompt, enter this command:
gruntBrowse to the
jqueryfolder—within this will be a folder calleddist, which contains our custom build of jQuery, ready for use, as shown in the following screenshot:
If there are modules within the library that we don't need, we can run a custom build. We can set the Grunt task to remove these when building the library, leaving in those that are needed for our project.
Note
For a complete list of all the modules that we can exclude, see https://github.com/jquery/jquery#modules.
For example, to remove AJAX support from our build, we can run this command in place of step 5, as shown previously:
grunt custom:-ajax
This results in a file saving on the original raw version of 30 KB as shown in the following screenshot:
The JavaScript and map files can now be incorporated into our projects in the usual way.
Note
For a detailed tutorial on the build process, this article by Dan Wellman is worth a read (https://www.packtpub.com/books/content/building-custom-version-jquery).
There is an online GUI available, which performs much the same tasks, without the need to install Git or Grunt. It's available at http://projects.jga.me/jquery-builder/, although it is worth noting that it hasn't been updated for a while!
Okay, so we have jQuery installed; let's take a look at one more useful function that will help in the event of debugging errors in our code. Support for source maps has been made available within jQuery since version 1.9. Let's take a look at how they work and see a simple example in action.