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

Source: Internet
Author: User
Tags git shell



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


Related Article

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.