Grunt入門學習

grunt學習一

前話（摘自https://www.gruntjs.net/）

• 1.在學習之前瞭解下爲什麼需要用構建工具
  一句話：自動化。對於需要反覆重複的任務，例如壓縮（minification）、編譯、單元測試、linting等，自動化工具可以減輕你的勞動，簡化你的工作。當你在 Gruntfile 文件正確配置好了任務，任務運行器就會自動幫你或你的小組完成大部分無聊的工作
• 2.爲什麼要使用 Grunt，Grunt的作用是什麼？
  Grunt 生態系統非常龐大，並且一直在增長。由於擁有數量龐大的插件可供選擇，因此，你可以利用 Grunt 自動完成任何事，並且花費最少的代價。如果找不到你所需要的插件，那就自己動手創造一個 Grunt 插件，然後將其發佈到 npm 上吧。
  Grunt的作用,按任務目標大致可分爲四類：
  1. 文件操作型：比如合併、壓縮js和css文件等（包括）。
  2. 預編譯型：比如編譯less、sass、coffeescript等。
  3. 類庫項目構建型：比如 angular、ember、backbone等.
  4. 工程質量保障型：比如jshint、jasmine、mocha等.

學習歷程

• 1.安裝nodejs

grunt必須依賴於node.js，基於先學習好grunt的目的，那麼首先，我們要安裝node.js, https://nodejs.org/zh-cn/download/

• 2.新建一個項目
• 3.安裝 CLI

在繼續學習前，你需要先將Grunt命令行（CLI）安裝到全局環境中。安裝時可能需要使用sudo（針對OSX、*nix、BSD等系統中）權限或者作爲管理員（對於Windows環境）來執行以下命令。

    npm install -g grunt-cli

• 4.一般需要在你的項目中添加兩份文件：package.json 和 Gruntfile.js。

package.json: 此文件被npm用於存儲項目的元數據，以便將此項目發佈爲npm模塊。你可以在此文件中列出項目依賴的grunt和Grunt插件，放置於devDependencies配置段內。

Gruntfile: 此文件被命名爲 Gruntfile.js 或 Gruntfile.coffee，用來配置或定義任務（task）並加載Grunt插件的。 此文檔中提到的 Gruntfile 其實說的是一個文件，文件名是 Gruntfile.js 或 Gruntfile.coffee。

大部分 grunt-init 模版都會自動創建特定於項目的package.json文件。
npm init命令會創建一個基本的package.json文件，根據命令提示輸入一些項目信息，生成文件，文件內容如下。（也可手動創建文件）

{
  "name": "grunt-demo",
  "version": "10.1.0",
  "description": "aaaaaaaaaaa_demo",
  "main": "./Gruntfile.js",
  "author": "",
  "devDependencies": {
    "grunt": "^1.1.0",
    "grunt-contrib-uglify": "^0.5.1"
  }
}

在工程根目錄下運行 npm install
等命令成功跑完之後，在工程根目錄中生成了node_modules目錄，該目錄包含一些必要的插件。

接下來我們需要Gruntfile.js配置

module.exports = function(grunt) {

    // Project configuration.
    grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),
      uglify: {
        options: {
          banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
        },
        build: {
          src: 'src/js/*.js',
          dest: 'build/<%= pkg.name %>.min.js'
        }
      }
    });
  
    // 加載包含 "uglify" 任務的插件。
    grunt.loadNpmTasks('grunt-contrib-uglify');
  
    // 默認被執行的任務列表。
    grunt.registerTask('default', ['uglify']);
  
  };

接下來我們只需要在工程根目錄下，運行命令 grunt
我們可以在根目錄看到 動態生成了文件夾 build 如下

@ 以下部分來自摘抄

接下來我們來重點看下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'),
    uglify: {
        options: {
            banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
        },
        build: {
            src: 'src/js/*.js',
            dest: 'build/<%= pkg.name %>.min.js'
        }
    }
});