Javascript Project Build tool grunt practice: Install and create a project framework

GruntIs a task-basedJavascriptThe project command line build tool 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 static servers.

 

　　

 

Install GRUNT

It is recommended that Windows users use git shell for command line operations. When installing GitHub for Windows desktop, git shell is automatically installed.

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

Grunt runs in the node. js environment. Suppose you have installed node. js and NPM.

npm install grunt

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

npm install -g grunt

　　

Create a project framework

After grunt is installed, you can create a project. Grunt has four built-in basic project templates:

　　Gruntfile, Create command:

grunt init:gruntfile

　　Commonjs, Create command:

grunt init:commonjs

　　Jquery, Create command:

grunt init:jquery

　　Node, Create command:

grunt init:node

We created a jquery project today and compiled a jquery plug-in example. Now GitHub has created the example repository gruntdemo, and then cloned it to the local device using the desktop tool. Go to the repository directory in git shell, and then enter the grunt init: jquery command to create it, if a project already exists in the current location, the following prompt may be displayed:

　　

If overwrite is required, use the -- forece parameter:

grunt init:jquery --force

When creating a project, you must enter the basic information of the project, such as the project name, description, repository address, and author information (the following items have the default content:

　　

OK. The project is successfully created here! The directory structure of the project is as follows:

　　

The content and format of the readme. md file are also generated:

　　

Then you can write the plug-in code. The jquery plug-in 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() {    return this.each(function() {      $(this).html('awesome');    });  };  // Static method.  $.awesome = function() {    return 'awesome';  };  // Custom selector.  $.expr[':'].awesome = function(elem) {    return elem.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));

　　

Next article: javascript Project Build tool grunt practice: tasks and instructions, coming soon ......

Articles you may be interested in

• Classic jquery image carousel plug-in
• Well-selected excellent jquery Ajax paging plug-ins
• Ten carefully selected online css3 code generation tools
• 13 sets of exquisite webpage icons
• 10 sets of exquisite free website background management system templates

 

Link to this article: javascript Project Build tool grunt practice: Introduction and Installation

Source: Dream sky ◆ focus on front-end development technology ◆ share web design resources