Build Your Own jQuery Version – Step By Step Guide

Starting from version 1.8, it’s possible to build a custom version of jquery that significantly reduce it’s size by eliminating unnecessary modules such as ajax, event, etc.. So this step by step tutorial will show you how to do it.

1. Preparation

Assume we are using windows operating system, to be able to create custom build jQuery, we need these following tools (must be installed):

  • Node.js (NPM.js included)
    First, we need to install Node.js and NPM.js. This installation can be done easily, just visit https://nodejs.org/en/ to download the installer, run it, and then follow the wizard, wait for a moment until the installation process is finished.
  • Git
    Such as Node.js, Git installation can be done easily too, the installer can be download directly on https://git-scm.com/downloads. During installation, there are several parameters that need to be considered (this tutorial use windows terminal, so when Choosing Git Environment, you have to choose Use Git from the Windows Command Prompt option), for more details please visit: How To Install Git On Windows
  • GRUNT
    After Installing Node.js and Git, we must install Grunt. Grunt installation can also be done quickly and easily, all you have to do is open a terminal window and run npm install -g grunt-cli command.
    install_grunt_cli

2. Clone jQuery From Github

Before we clone jQuery source, in order to organize our work, we need to create a folder, for example, I’ll create a folder named Git Repository on drive E (E:\Git Repository), open windows terminal and navigate to that folder, then run git clone https://git to clone jquery source.

clone_jquery_github

This process will create a folder named jquery (located in E:\Git Repository) that contains all jQuery repository.

3. Install NPM Source To Our Repository

Next, navigate to jquery folder by typing cd jquery, and then install NPM source by running this simple command: npm install. NPM Source is large enough, the extracted files are around 50mb.

install_npm_to_jquery_repository

wait until the installation process is finished.

The First time you clone jquery repository, you need to run grunt command once. This command will create a dist folder (inside jquery folder) which contains the lastest version of jquery file (inc. minified version),  you may want to check it version by open jquery.js file with your favorite text editor.

npm_grunt_jquery

4. Backup Repository

So far our repository is ready to be manipulated, but, first we need to backup what we have done so far, so if there is something going wrong, it could easily be returned to its original state. To perform a backup, simply copy the jquery folder and paste with a specific name eg: juery_npm_grunt.

5. Create custom build jquery

This is the main part of this tutorial, create custom jquery build, there are some steps that we must pass

Open Branch

First we need to open jquery branch, to do so, we use a command: git checkout <jquery version>, if we let the version empty, it will open the lastest branch included alpha/beta version, so  make it clear by defining the version. To list all available version, you can use git command:  git tag

git_tag_jquery

Now, for example, we use jquery version 2.1.4, open the branch by running git checkout 2.1.4 command. This command will create jquery file (version 2.1.4) in the dist folder. Again, you may want to check it version by open jquery.js file using your favorite text editor.

jquery_dist_folder

As we can see the jquery file size is equal to 242 KB and the minified version (jquery.min.js) is approximately 83KB. You can make an experiment by trying to check out another version.

Build custom

It’s time to build our custom jquery version by eliminating unnecessary module, to do so we use grunt command: grunt custom:-<module name>

For example, to eliminate ajax module, just run grunt custom:-ajax, to eliminate multiple modules (eg: ajax, effect, and event), append each module to the end of the task using comma (,) separator, for example: grunt custom:-ajax,-effect,-event. Note that there is no space between comma, otherwise it will be trigger an error. For complete list of available module, please see the jquery module page

Running grunt custom:-ajax give me this following result

jquery_custom_noajax

this command will build jquery from source without including ajax module and save the result in dist folder.

jquery_custom_without_ajax_module

As we can see, the jquery file size is now 213 KB and the minified version (jquery.min.js) is approximately 74 KB, reduced about 14% compare to the original state. You are free to run various commands, for example: after running grunt custom:-ajax,-effects,-event-driven,  then run grunt custom: -ajax, the result is as expected, because every time we run grunt custom command, it will always start from the original state of jquery source.

more example command: grunt custom:-ajax,-deprecated,-deferred,-wrap,-offset, and the result is:

jquery_file_inthe_dist_folder

So far we can use the result of our work, simply copy jquery file from the dist folder into your project, if you want to save your work for later use, you can follow the rest of this tutorial.

6. Saving Our Work

Because we work on Git, we will save our work as a branch, in order to not disturb the existing one, we need to create a new branch, to do so, run this command:

git branch <new branch name>
git checkout <new branch name>

or using the short version:

git checkout -b <new branch name>

git branch command will create a new branch and git checkout will activate that branch, for example, to create and activate a new branch named 2.1.4-ajax, we use:

git checkout -b "2.1.4-ajax"

previously we were in the 2.1.4 branch, by running that command, now we are in branch 2.1.4-ajax

creating_a_new_branch_on_git

Saving the branch

Next we save the changes that we have done by commit our branch, if this is the first time you use Git, you need to define your name and email into git configuration file, otherwise, Git will display an error message. To define via command prompt, use: git config command --global user.email "email@example.com" command for the email, while for the name, use: git config --global user.name "Your Name", both commands can be combined using && mark.

registering_name_and_email_on_git

now we can save our branch using the following command:

git add .
git commit -m <messsage>

or simple version

git commit -a -m <message>

git add command or the shortened version -a is used to add all files into staging are, and the commit command used to record new version to the branch. for example, we save our work and run a command like so:

git commit -a -m "Merge branch 2.1.4-ajax (v2.1.4 with no ajax)"

commiting_jquery_without_ajax

Saving branch is completed, whenever you want to open it, just run git checkout 2,1,4-ajax command, the dist folder will be automatically updated with jquery file that we have modified.

Adding tag

Previously mentioned that we can open the list of available version using git tag, so.. in order to easily list what we have done, just add tag to our work by using this command:

git tag -a <tag name> -m <message>

postfix -a is shortened version of --annotate. Tags are displayed alphabetically so that to be easily searchable, prefix our tag with jquery version that we have been modified, continued from the previous example, we named our tag “2.1.4-ajax”, example of command:

git tag -a 2.1.4-ajax -m "v2.1.4 with no ajax"

then, when we run git tag command, we’ll see the tags that we have made listed there, as shown below:

git_tag_with_custom_jquery

7. Conclusion

Now, starting from version 1.8.0, its possible to build your own version of jquery by eliminating the modules (such as ajax, event, effect, etc..) that you do not use, it will reduce the file size and speed up the performance of our website. The overall process looks a little bit complicated because we need to install various tools (NPM, GIT, etc..), but with some effort, it becomes easy.

Leave a comment

Like Us

Social