前端項目構建工具---Grunt

時間 2019-11-08

標籤前端項目構建工具 grunt 欄目 Node.js 简体版

原文原文鏈接

什麼是Grunt？javascript

grunt是javascript項目構建工具，在grunt流行以前，前端項目的構建打包大多數使用ant。(ant具體使用能夠google)，但ant對於前端而言，存在不友好，執行效率低，學習成本高的問題。因此最近幾年對於前端構建工具--grunt就應運而生。css

Grunt能作什麼呢？前端

按任務目標大體可分爲四類：java

1. 文件操做型：好比合並、壓縮js和css文件等（包括）。node

2. 預編譯型：好比編譯less、sass、coffeescript等。linux

3. 類庫項目構建型：好比 angular、ember、backbone等.git

4. 工程質量保障型：好比jshint、jasmine、mocha等.github

下面咱們最主要來說下第一種(文件合併與壓縮)。由於無論什麼項目在上線以前都要對文件壓縮或者有合併的文件要合併，也就是說減小請求數和代碼體積減小，提升前端性能方面。在學習grunt以前咱們都知道grunt依賴於nodeJS平臺。也就是說咱們要安裝grunt 必須先安裝nodeJS環境和NPM環境。npm

1.nodeJS的安裝json

因爲我目前作的項目都是基於window下的因此我這邊講的都是基於windows下的安裝，若是想要了解linux或者unix環境下安裝能夠google下。

我這邊只講下普通安裝方法。其實就是最簡單的方法了，對於大多Windows用戶而言，都是不太喜歡折騰的人，你能夠從這裏（http://nodejs.org/dist/v0.6.1/node-v0.6.1.msi ）直接下載到Node.js編譯好的msi文件。而後雙擊便可在程序的引導下完成安裝。

而後再命令行中直接運行以下命令便可：

打印出版本號說明已經安裝好了。該引導步驟會將node.exe文件安裝到C:\Program Files (x86)\nodejs\目錄下，並將該目錄添加進PATH環境變量。

2.NPM安裝

1. 首先咱們須要瞭解的是什麼是NPM？NPM能作什麼？

npm是node的包管理器，咱們在開發nodejs應用程序的過程當中，可能須要依賴許許多多的第三方模塊以提升開發效率，那麼此時，咱們就須要npm來輔助安裝所需package。

2. 按照步驟以下：

1. 下載npm源碼 https://github.com/isaacs/npm/tags

2. 將npm源代碼解壓到好比D:\npm目錄中。

3. 執行命令進入npm文件中執行以下命令：

出現如上面信息說明npm已經按照好了。

3.Grunt的安裝

特別留意下grunt是有二個版本：服務器端版本（grunt）和客戶端版本（grunt-cli），咱們須要安裝的是客戶端版本。若是咱們如今已經安裝了服務器版本的話，咱們能夠卸載掉：以下命令就ok npm uninstall -g grunt 。

客戶端安裝命令npm install -g grunt-cli 以下圖所示：

出現如上顯示說明也已經安裝好了！其中 -g安裝全局NodeJs模塊。下面咱們須要package.json文件。

package.json文件

假設你有個工程目錄叫nodejsDemo，在工程根目錄放個package.json.

package.json是npm的包配置文件，package.json用於配置你須要拉取的grunt插件信息，好比下面的代碼：

{
    "name": "gruntJs",
    "version": "1.0.0",
    "devDependencies": {
    "grunt": "~0.4.0",
    "grunt-contrib-jshint": "~0.1.1",
    "grunt-contrib-uglify": "~0.1.2",
    "grunt-contrib-concat": "~0.1.1" 
    }
}

可是要提醒下你們 package.json 中 devDependencies 內部的版本必定要對應，剛開始配置時候一直配置不上報錯有多是版本的問題因此安裝我上面的版原本是ok的。

留意devDependencies字段，定義你要拉取的依賴模塊，上面的代碼，拉取grunt-contrib-uglify插件（用於壓縮js）及grunt-contrib-concat 插件(用於合併文件)，字段的值~0.1.1，指明須要模塊的版本號，「~」是至少的意思。

在工程根目錄啓動命令行工具，運行npm install 以下圖所示：

出現如上面信息也說明已經配置成功了，依賴拉取成功後，在nodejsDemo工程中生成了node_modules目錄，該目錄就包含了以下幾個文件：

到此準備工做已經ok了！接下來咱們須要Gruntfile.js配置。

Gruntfile.js配置

1. 先在工程目錄nodejsDemo下建立一個文件夾src 用於存放全部的js文件。裏面目前包含2個js文件 grunt.js 和bb.js 如今我須要的是對src目錄下的grunt.js和bb.js進行壓縮與合併操做。

2. 接下來我要在工程目錄nodejsDemo建立一個Gruntfile.js 內容代碼以下：

module.exports = function(grunt) {
    // 配置
    grunt.initConfig({
        pkg : grunt.file.readJSON('package.json'),
        concat: {
              domop: {
                  src: ['src/grunt.js', 'src/bb.js'],
                  dest: 'dest/domop.js'
              }
          },
          uglify: {
              build: {
                  src : 'dest/domop.js',
                  dest : 'dest/domop-min.js'
              }
          }
      });

      // 載入concat和uglify插件，分別對於合併和壓縮
      grunt.loadNpmTasks('grunt-contrib-concat');
      grunt.loadNpmTasks('grunt-contrib-uglify');

      // 註冊任務
      grunt.registerTask('default', ['concat','uglify']);
  };

說明有concat是合併的意思他的意思是指src文件夾下的grunt.js和bb.js 先合併到dest文件夾下的domop.js中。而後接着壓縮壓縮文件爲domop-min.js。

接下來咱們只須要運行以下命令便可：

如上所示：說明已經完成合並與壓縮操做了。咱們能夠在根目錄看到動態生成了文件夾 dest 而後在裏面有2個文件以下：

說明一切都ok了！

接下來咱們來重點看下Gruntfile.js代碼的含義。

全部grunt的代碼，必須放在module.exports函數內，參數grunt爲grunt對象，當你運行命令grunt時，grunt系統會去讀此函數的grunt構建配置。

grunt.initConfig(obj)

initConfig用於配置構建信息，第一個參數必須是個object。

// 構建任務配置
grunt.initConfig({
 
});

grunt.file.readJSON(path)

讀取一個json文件，一般咱們會把構建任務的基本配置寫在獨立的json文件內，方便咱們修改。

// 構建任務配置
grunt.initConfig({
    //讀取package.json的內容，造成個json數據
    pkg: grunt.file.readJSON('package.json')
});

grunt.loadNpmTasks(pluginName).

加載指定插件任務.

grunt.registerTask(taskName,taskArray)

註冊任務，好比下面的代碼：

grunt.registerTask('default', ['concat','uglify']);

註冊默認執行的任務，即你運行grunt命令時，觸發的任務構建。第二個參數爲任務目標名，在initConfig()中配置：

// 配置
    grunt.initConfig({
        pkg : grunt.file.readJSON('package.json'),
        concat: {
              domop: {
                  src: ['src/grunt.js', 'src/bb.js'],
                  dest: 'dest/domop.js'
              }
          },
          uglify: {
              build: {
                  src : 'dest/domop.js',
                  dest : 'dest/domop-min.js'
              }
          }
      });