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.
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.
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
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-clicommand.
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.
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.
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.
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
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:
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.
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.
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
grunt custom:-ajax give me this following result
this command will build jquery from source without including ajax module and save the result in dist folder.
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:
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
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.
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)"
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.
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>
-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:
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.
Loves articles on webdevzoom.com? join our newsletter to get quality article right to your inbox. Nothing else, just quality stuff!!!