I downloaded the (https://github.com/jzaefferer/jquery-validation)[jQuery Validation plugin) from github and I thought it would be easy to get it installed. Usually when I download javascript, I just needed to copy the javascript files and I’m done. This time around I was really puzzled. The index.html in the demo directory contained this line:

<script src="../dist/jquery.validate.js"></script>

but that directory didn’t exist. What is going on? I looked at the project root directory and found Gruntfile and saw some json files. After a bit of googling, I discovered that grunt is a build system for javascript.

You run

$ npm install
npm http GET https://registry.npmjs.org/grunt-contrib-qunit
npm http GET https://registry.npmjs.org/grunt-contrib-compress
npm http GET https://registry.npmjs.org/grunt-contrib-jshint
npm http GET https://registry.npmjs.org/grunt
npm http GET https://registry.npmjs.org/grunt-contrib-watch
npm http GET https://registry.npmjs.org/grunt-contrib-uglify
npm http GET https://registry.npmjs.org/grunt-contrib-concat
npm http 200 https://registry.npmjs.org/grunt-contrib-qunit
npm http GET https://registry.npmjs.org/grunt-contrib-qunit/-/grunt-contrib-qunit-0.2.2.tgz
...

This looks for a file package.json which contains a description of the necessary packages to include much like a Gemfile in ruby.

Next, you run grunt

euler:jquery-validation ckim$ grunt
Running "concat:dist" (concat) task
File "dist/jquery.validate.js" created.
File "dist/additional-methods.js" created.

Running "jshint:files" (jshint) task
>> 86 files lint free.

Running "jshint:test" (jshint) task
>> 4 files lint free.

Running "jshint:grunt" (jshint) task
>> 1 file lint free.

Running "qunit:files" (qunit) task
Testing test/index.html ....................................................%o has no name assigned [object HTMLInputElement]
%o has no name assigned [object HTMLInputElement]
%o has no name assigned [object HTMLInputElement]
%o has no name assigned [object HTMLInputElement]
....................................................................................................................OK
>> 949 assertions passed (3581ms)

Done, without errors.
euler:jquery-validation ckim$

As you can see the dist directory is created and tests were run. Now you’re all set. You can copy the files from the dist directory and you’re ready to go!