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

Source: Internet
Author: User
Tags git shell

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.