JavaScript 項目構建工具 Grunt 實踐：安裝和建立項目框架

時間 2019-11-06

標籤 javascript 項目構建工具 grunt 實踐安裝建立框架欄目 JavaScript 简体版

原文原文鏈接

　　 Grunt 是一個基於任務的 JavaScript 項目命令行構建工具，運行於 Node.js 平臺。Grunt 可以從模板快速建立項目，合併、壓縮和校驗 CSS & JS 文件，運行單元測試以及啓動靜態服務器。javascript

安裝 Grunt

　　推薦 Windows 用戶使用 Git Shell 來進行命令行操做。安裝 Windows 桌面版 GitHub 的時候會自動安裝 Git Shell。css

　　GitHub for Windows 下載地址：http://windows.github.comhtml

　　Grunt 運行於 Node.js 環境，這裏假設你已經安裝了 Node.js 和 NPM。前端

npm install grunt

　　爲了便於操做，能夠使用參數 -g 配置爲全局安裝：java

npm install -g grunt

建立項目框架

　　安裝好 Grunt 後就能夠開始建立項目了，Grunt 內置下面四種基本的項目模板：node

　　gruntfile，建立命令：jquery

grunt init:gruntfile

　　commonjs，建立命令：css3

grunt init:commonjs

　　jquery，建立命令：git

grunt init:jquery

　　node，建立命令：github

grunt init:node

　　咱們今天建立的是 jQuery 項目，編寫一個 jQuery 插件示例。如今 GitHub 建立好示例倉庫 GruntDemo，而後使用桌面版工具克隆到本地，在 Git Shell 中進入倉庫目錄，再輸入 grunt init:jquery 命令進行建立，若是當前位置已存在項目，可能會有以下提示：

　　若是須要覆蓋，這個時候須要使用 --forece 參數：

grunt init:jquery --force

　　建立項目時，須要填寫一些項目的基本信息，例如項目名稱、描述、倉庫地址、做者信息（後面幾項有默認內容）等，如圖示：

　　OK，到這裏項目就建立成功了！下面是項目的目錄結構：

　　而且 README.md 文件的內容和格式也生成好了：

　　而後就能夠編寫插件代碼了。Grunt 提供的 jQuery 插件代碼框架以下：

/*
 * 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));

　　同時還生成了相應的 Qunit 測試代碼和頁面：

/*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 項目構建工具 Grunt 實踐：任務和指令》，敬請期待……