JavaScript Project Building Tools Grunt Practice: Install and create project frameworks

Grunt is a task-based JavaScript Project Command-line build tool that runs on the node. JS platform. Grunt can quickly create projects from templates, merge, compress and validate CSS & JS files, run unit tests, and start a static server.

Installing Grunt

It is recommended that Windows users use the Git Shell for command-line operations. Git Shell is installed automatically when you install the Windows desktop version of GitHub.

GitHub for windows:http://windows.github.com

Grunt is running in the node. JS Environment, assuming you already have node. js and NPM installed.

npm install grunt

For ease of operation, you can configure the global installation with parameter-G:

npm install -g grunt

Create a project framework

After installing Grunt, you can start to create the project, Grunt built the following four basic project templates:

  gruntfile, create the command:

grunt init:gruntfile

  Commonjs, create the command:

grunt init:commonjs

  jquery, creating commands:

grunt init:jquery

  node, create the command:

grunt init:node

Today we are creating a jquery project and writing a jquery plugin example. Now GitHub creates a sample warehouse Gruntdemo, then uses the desktop tool to clone to the local, enter the repository directory in the Git Shell, enter the grunt init:jquery command to create, and if the current location already exists, there may be a hint like this:

If you need to overwrite, this time you need to use the--forece parameter:

grunt init:jquery--force

When you create a project, you need to fill in some basic information about the project, such as the project name, description, warehouse address, author information (the following items have default content), and so on:

OK, the project has been created successfully! The following is the directory structure of the project:

and the contents and format of the Readme.md file are also generated:

Then you can write the plug-in code. The JQuery plugin code framework provided by Grunt is as follows:

/* * GruntDemo * https://github.com/bluesky/grunt-demo * * Copyright (c) 2013 BlueSky * Licensed under the MIT license. */(function($) {  // Collection method.  $.fn.awesome = function() {    returnthis.each(function() {      $(this).html(‘awesome‘);    });  };  // Static method.  $.awesome = function() {    return‘awesome‘;  };  // Custom selector.  $.expr[‘:‘].awesome = function(elem) {    returnelem.textContent.indexOf(‘awesome‘) >= 0;  };}(jQuery));

The corresponding Qunit test code and page are also generated:

/*global QUnit:false, module:false, test:false, asyncTest:false, expect:false*//*global start:false, stop:false ok:false, equal:false, notEqual:false, deepEqual:false*//*global notDeepEqual:false, strictEqual:false, notStrictEqual:false, raises:false*/(function($) {  module(‘jQuery#awesome‘, {    setup: function() {      this.elems = $(‘#qunit-fixture‘).children();    }  });  test(‘is chainable‘, 1, function() {    // Not a bad test to run on collection methods.    strictEqual(this.elems.awesome(), this.elems, ‘should be chaninable‘);  });  test(‘is awesome‘, 1, function() {    strictEqual(this.elems.awesome().text(), ‘awesomeawesomeawesome‘, ‘should be thoroughly awesome‘);  });  module(‘jQuery.awesome‘);  test(‘is awesome‘, 1, function() {    strictEqual($.awesome(), ‘awesome‘, ‘should be thoroughly awesome‘);  });  module(‘:awesome selector‘, {    setup: function() {      this.elems = $(‘#qunit-fixture‘).children();    }  });  test(‘is awesome‘, 1, function() {    // Use deepEqual & .get() when comparing jQuery objects.    deepEqual(this.elems.filter(‘:awesome‘).get(), this.elems.last().get(), ‘knows awesome when it sees it‘);  });}(jQuery));

JavaScript Project Building Tools Grunt Practice: Install and create project frameworks