自動構建工具Grunt

摘要：

　　大部分項目在部署以前都須要作的就是js、css文件的壓縮、合併，以及一些文件的錯誤檢查，甚至是將LESS文件轉換成css文件，coffeescript文件轉化成js文件等等。可是項目開發是分迭代的，沒開發完一次，上面的工做要從新作一遍。那有什麼工具能幫助咱們來作這些重複的工做呢？Grunt就是其中一個很是好用的工具。下面就來學習一下Grunt。

安裝：

　　Grunt是基於node.js，因此你先安裝node.js，安裝完以後，只須要執行下面的命令就能夠安裝Grunt

npm install -g grunt-cli

參數g表示全局安裝，grunt-cli表示安裝的是grunt的命令行界面。

　　安裝完成以後，他會把Grunt配置到你的系統路徑，容許其從任何目錄下運行。安裝完以後並不能執行操做，由於Grunt是基於模塊機構，因此必須安裝模塊。模塊是局部的，是根據項目需求來安裝的。在項目的隨便一個目錄下（最好是根目錄，也能夠隨便建立個目錄）新建一個文件---package.json(也能夠經過node init來建立)，內容以下：

{
    "name": "",            // 項目名稱
    "version": "",         // 項目版本
    "private": true,       // 項目是否私有
    "description": "",     //  項目描述
    "main": "",            // 項目主要文件
    "dependencies": {},    // 項目依賴的模塊
    "devDependencies": {   // 項目開發階段依賴的模塊
        "grunt": "0.x.x",  // grunt模塊爲最新的0.x.x版
        "grunt-contrib-clean": "~0.5.0", // clean插件不低於0.5.0
        "grunt-contrib-copy": "~0.5.0",
        "grunt-contrib-less": "~0.11.0",
        "grunt-contrib-uglify": "~0.4.0",
        "grunt-contrib-watch": "~0.6.1",
        "grunt-contrib-concat": "*"
    },
    "keywords": [],   // 項目關鍵字
    "author": {       // 做者
        "name": "",
        "age": ""
    },
    "contributors": [],  // 貢獻者 
    "license": ""        // 版權
}

 

 

而後在當前目錄下，經過命令終端運行npm install，這時你會發現多出一個node_modules文件夾，裏面就是咱們安裝的模塊。

配置：

　　Grunt和模塊都已經安裝完成了，下面須要作的就是建立一個配置文件，來告訴Grunt須要去哪裏，而後作什麼等等。在上面的目錄下新建一個文件Gruntfile.js(注意大小寫)，內容以下：

module.exports = function(grunt) {
  
  'use strict';

  // 配置Grunt各類模塊的參數
  grunt.initConfig({
    clean:  {
      oldMinFiles: [],
      afterUglify: []
    },
    jslint: {
      command: "",
      options: ""
    },
    concat: {

    },
    uglify: {

    },
    watch:  {

    },
    copy: {

    },
    less: {

    }
  });

  // 從node_modules目錄加載模塊文件
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-cmd-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-less');
  grunt.loadNpmTasks('grunt-contrib-watch');

  // 定義任務
  grunt.registerTask('default', ['jsLint', 'concat', 'uglify']);
  grunt.registerTask('check', ['jslint']);

};

 

 

只須要在當前目錄執行命令

合併文件：

grunt concat

代碼檢查：

grunt check 

 

 後期將介紹grunt的每個模塊。

附錄：

 

grunt.initConfig

配置各模塊的參數，每項對應一個同名模塊。

grunt.loadNpmTasks

加載所需的模塊。

grunt.registerTask

定義具體的任務。第一個參數爲任務名，第二個參數是一個數組，表示該任務須要依次使用的模塊。default是默認任務，即直接輸入grunt命令，後面不跟任何參數，這時所調用的模塊爲default對應的任務。