9 min read

(For more resources related to this topic, see here.)

Why Is It Awesome?

While it’s fairly common for someone to say that they use jQuery in every site they build (this is usually the case for me), I would expect it much rarer for someone to say that they use the exact same jQuery methods in every project, or that they use a very large selection of the available methods and functionality that it offers.

The need to reduce file size as aggressively as possible to cater for the mobile space, and the rise of micro-frameworks such as Zepto for example, which delivers a lot of jQuery functionality at a much-reduced size, have pushed jQuery to provide a way of slimming down.

As of jQuery 1.8, we can now use the official jQuery build tool to build our own custom version of the library, allowing us to minimize the size of the library by choosing only the functionality we require.

For more information on Zepto, see http://zeptojs.com/.

Your Hotshot Objectives

To successfully conclude this project we’ll need to complete the following tasks:

  • Installing Git and Make

  • Installing Node.js

  • Installing Grunt.js

  • Configuring the environment

  • Building a custom jQuery

  • Running unit tests with QUnit

Mission Checklist

We’ll be using Node.js to run the build tool, so you should download a copy of this now. The Node website (http://nodejs.org/download/) has an installer for both 64 and 32-bit versions of Windows, as well as a Mac OS X installer. It also features binaries for Mac OS X, Linux, and SunOS. Download and install the appropriate version for your operating system.

The official build tool for jQuery (although it can do much more besides build jQuery) is Grunt.js, written by Ben Alman. We don’t need to download this as it’s installed via the Node Package Manager (NPM). We’ll look at this process in detail later in the project.

For more information on Grunt.js, visit the official site at http://gruntjs.com.

First of all we need to set up a local working area. We can create a folder in our root project folder called jquery-source. This is where we’ll store the jQuery source when we clone the jQuery Github repository, and also where Grunt will build the final version of jQuery.

Installing Git and Make

The first thing we need to install is Git, which we’ll need in order to clone the jQuery source from the Github repository to our own computer so that we can work with the source files. We also need something called Make, but we only need to actually install this on Mac platforms because it gets installed automatically on Windows when Git is installed.

As the file we’ll create will be for our own use only and we don’t want to contribute to jQuery by pushing code back to the repository, we don’t need to worry about having an account set up on Github.

Prepare for Lift Off

First we’ll need to download the relevant installers for both Git and Make. Different applications are required depending on whether you are developing on Mac or Windows platforms.

Mac developers

Mac users can visit http://git-scm.com/download/mac for Git.

Next we can install Make. Mac developers can get this by installing XCode. This can be downloaded from https://developer.apple.com/xcode/.

Windows developers

Windows users can install msysgit, which can be obtained by visiting https://code.google.com/p/msysgit/downloads/detail?name=msysGit-fullinstall-1.8.0-preview20121022.exe.

Engage Thrusters

Once the installers have downloaded, run them to install the applications. The defaults selected by the installers should be fine for the purposes of this mission. First we should install Git (or msysgit on Windows).

Mac developers

Mac developers simply need to run the installer for Git to install it to the system. Once this is complete we can then install XCode. All we need to do is run the installer and Make, along with some other tools, will be installed and ready.

Windows developers

Once the full installer for msysgit has finished, you should be left with a Command Line Interface (CLI) window (entitled MINGW32) indicating that everything is ready for you to hack. However, before we can hack, we need to compile Git.

To do this we need to run a file called initialize.sh. In the MINGW32 window, cd into the msysgit directory. If you allowed this to install to the default location, you can use the following command:

cd C:msysgitmsysgitsharemsysGit

Once we are in the correct directory, we can then run initialize.sh in the CLI. Like the installation, this process can take some time, so be patient and wait for the CLI to return a flashing cursor at the $ character.

An Internet connection is required to compile Git in this way.

Windows developers will need to ensure that the Git.exe and MINGW resources can be reached via the system’s PATH variable. This can be updated by going to Control Panel | System | Advanced system settings | Environment variables.

In the bottom section of the dialog box, double-click on Path and add the following two paths to the git.exe file in the bin folder, which is itself in a directory inside the msysgit folder wherever you chose to install it:

  • ;C:msysgitmsysgitbin;
  • C:msysgitmsysgitmingwbin;

Update the path with caution!

You must ensure that the path to Git.exe is separated from the rest of the Path variables with a semicolon. If the path does not end with a semicolon before adding the path to Git.exe, make sure you add one. Incorrectly updating your path variables can result in system instability and/or loss of data. I have shown a semicolon at the start of the previous code sample to illustrate this.

Once the path has been updated, we should then be able to use a regular command prompt to run Git commands.

Post-installation tasks

In a terminal or Windows Command Prompt (I’ll refer to both simply as the CLI from this point on for conciseness) window, we should first cd into the jquery-source folder we created at the start of the project. Depending on where your local development folder is, this command will look something like the following:

cd c:jquery-hotshotsjquery-source

To clone the jQuery repository, enter the following command in the CLI:

git clone git://github.com/jquery/jquery.git

Again, we should see some activity on the CLI before it returns to a flashing cursor to indicate that the process is complete.

Depending on the platform you are developing on, you should see something like the following screenshot:

Objective Complete — Mini Debriefing

We installed Git and then used it to clone the jQuery Github repository in to this directory in order to get a fresh version of the jQuery source. If you’re used to SVN, cloning a repository is conceptually the same as checking out a repository.

Again, the syntax of these commands is very similar on Mac and Windows systems, but notice how we need to escape the backslashes in the path when using Windows. Once this is complete, we should end up with a new directory inside our jquery-source directory called jquery.

If we go into this directory, there are some more directories including:

  • build: This directory is used by the build tool to build jQuery
  • speed: This directory contains benchmarking tests
  • src: This directory contains all of the individual source files that are compiled together to make jQuery
  • Test: This directory contains all of the unit tests for jQuery

It also has a range of various files, including:

  • Licensing and documentation, including jQuery’s authors and a guide to contributing to the project
  • Git-specific files such as .gitignore and .gitmodules
  • Grunt-specific files such as Gruntfile.js
  • JSHint for testing and code-quality purposes

Make is not something we need to use directly, but Grunt will use it when we build the jQuery source, so it needs to be present on our system.

Installing Node.js

Node.js is a platform for running server-side applications built with JavaScript. It is trivial to create a web-server instance, for example, that receives and responds to HTTP requests using callback functions.

Server-side JS isn’t exactly the same as its more familiar client-side counterpart, but you’ll find a lot of similarities in the same comfortable syntax that you know and love. We won’t actually be writing any server-side JavaScript in this project – all we need Node for is to run the Grunt.js build tool.

Prepare for Lift Off

To get the appropriate installer for your platform, visit the Node.js website at http://nodejs.org and hit the download button. The correct installer for your platform, if supported, should be auto-detected.

Engage Thrusters

Installing Node is a straightforward procedure on either the Windows or Mac platforms as there are installers for both. This task will include running the installer, which is obviously simple, and testing the installation using a CLI.

Installing Node is a straightforward procedure on either the Windows or Mac platforms as there are installers for both. This task will include running the installer, which is obviously simple, and testing the installation using a CLI. On Windows or Mac platforms, run the installer and it will guide you through the installation process. I have found that the default options are fine in most cases. As before, we also need to update the Path variable to include Node and Node’s package manager NPM. The paths to these directories will differ between platforms.

Mac

Mac developers should check that the $PATH variable contains a reference to usr/local/bin. I found that this was already in my $PATH, but if you do find that it’s not present, you should add it.

For more information on updating your $PATH variable, see http://www.tech-recipes.com/rx/2621/os_x_change_path_environment_variable/.

Windows

Windows developers will need to update the Path variable, in the same way as before, with the following paths:

  • C:Program Filesnodejs;
  • C:UsersDesktopAppDataRoamingnpm;

Windows developers may find that the Path variable already contains an entry for Node so may just need to add the path to NPM.

Objective Complete — Mini Debriefing

Once Node is installed, we will need to use a CLI to interact with it. To verify Node has installed correctly, type the following command into the CLI:

node -v

The CLI should report the version in use, as follows:

We can test NPM in the same way by running the following command:

npm -v
Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here