初探grunt

今天開始正式學習grunt

參考博文：http://blog.fens.me/nodejs-grunt-intro/

一、關於grunt

Grunt是一個自動化的項目構建工具. 若是你須要重複的執行像壓縮, 編譯, 單元測試, 代碼檢查以及打包發佈的任務. 那麼你能夠使用Grunt來處理這些任務, 你所須要作的只是配置好Grunt, 這樣能很大程度的簡化你的工做.

若是在團隊中使用Grunt, 你只須要與其餘人員約定好使用Grunt應該規避的問題, 就可以很方便的自動化的處理大部分的常見工做任務, 你所付出的努力幾乎爲0.

 

二、安裝grunt

Grunt和Grunt插件都是經過npm, Node.js包管理器安裝和管理的.

Grunt 0.4.x要求Node.js的版本>=0.8.0(也就是0.8.0及以上版本的Node.js才能很好的運行Grunt)。

個人系統環境

C:\Users\Administrator>node -v
v0.10.29

C:\Users\Administrator>npm -v
1.4.14

系統中已經安裝好nodejs和npm，具體安裝方法參考：http://www.jb51.net/article/33086.htm

和安裝時"express不是內部命令"的解決方法：http://jingyan.baidu.com/article/922554468a3466851648f419.html

安裝grunt-cli

爲了方便使用Grunt，你應該在全局範圍內安裝Grunt的命令行接口(CLI)。要作到這一點，你可能須要使用sudo(OS X，*nix，BSD等平臺中)權限或者做爲超級管理員(Windows平臺)來運行shell命令。

npm install -g grunt-cli

這條命令將會把grunt命令植入到你的系統路徑中，這樣就容許你從任意目錄來運行它(定位到任意目錄運行grunt命令)。

grunt-cli並不grunt，grunt-cli的做用是管理本地各版本的grunt，讓命令行能夠直接執行grunt命令。

注意，安裝grunt-cli並不等於安裝了grunt任務運行器！Grunt CLI的工做很簡單：在Gruntfile所在目錄調用運行已經安裝好的相應版本的Grunt。這就意味着能夠在同一臺機器上同時安裝多個版本的Grunt。

下面全局安裝grunt-cli(-g)

C:\Users\Administrator>npm install -g grunt-cli
C:\Users\Administrator\AppData\Roaming\npm\grunt -> C:\Users\Administrator\AppDa
ta\Roaming\npm\node_modules\grunt-cli\bin\grunt
grunt-cli@0.1.13 C:\Users\Administrator\AppData\Roaming\npm\node_modules\grunt-c
li
├── resolve@0.3.1
├── nopt@1.0.10 (abbrev@1.0.5)
└── findup-sync@0.1.3 (lodash@2.4.1, glob@3.2.11)

CLI如何工做

每次運行grunt時，它都會使用node的require()系統查找本地已安裝好的grunt。正由於如此，你能夠從你項目的任意子目錄運行grunt。

若是找到本地已經安裝好的Grunt，CLI就會加載這個本地安裝好的Grunt庫，而後應用你項目中的Gruntfile中的配置(這個文件用於配置項目中使用的任務，Grunt也正是根據這個文件中的配置來處理相應的任務)，並執行你所指定的全部任務。

安裝grunt

接下來安裝全局grunt（不要在乎盤符）

E:\nodejs>npm install -g grunt
grunt@0.4.5 C:\Users\Administrator\AppData\Roaming\npm\node_modules\grunt
├── dateformat@1.0.2-1.2.3
├── which@1.0.5
├── eventemitter2@0.4.14
├── getobject@0.1.0
├── colors@0.6.2
├── rimraf@2.2.8
├── async@0.1.22
├── hooker@0.2.3
├── grunt-legacy-util@0.2.0
├── exit@0.1.2
├── lodash@0.9.2
├── coffee-script@1.3.3
├── underscore.string@2.2.1
├── iconv-lite@0.2.11
├── grunt-legacy-log@0.1.1 (underscore.string@2.3.3, lodash@2.4.1)
├── glob@3.1.21 (inherits@1.0.0, graceful-fs@1.2.3)
├── nopt@1.0.10 (abbrev@1.0.5)
├── js-yaml@2.0.5 (esprima@1.0.4, argparse@0.1.15)
├── minimatch@0.2.14 (sigmund@1.0.0, lru-cache@2.5.0)
└── findup-sync@0.1.3 (lodash@2.4.1, glob@3.2.11)

E:\nodejs>grunt
grunt-cli: The grunt command line interface. (v0.1.13)

Fatal error: Unable to find local grunt.

If you're seeing this message, either a Gruntfile wasn't found or grunt
hasn't been installed locally to your project. For more information about
installing and configuring grunt, please see the Getting Started guide:

http://gruntjs.com/getting-started

執行grunt命令，咱們發現系統報錯了，提示不能加載本地庫。由於，grunt命令執行，是須要當前目錄中包括package.json和Gruntfile.js兩個文件。

package.json，是npm項目配置文件
Gruntfile.js，是專門用來配置grunt的配置文件

接下來我就建立一個helloworld的項目

E:\nodejs>express -e hello

在上述目錄(package.json所在目錄)中運行npm install將依據package.json文件中所列出的每一個依賴來自動安裝適當版本的依賴。

這裏有一些爲項目建立package.json文件的方式：

• 大多數的grunt-init模板都會自動建立一個項目特定的package.json文件。

• npm init命令會自動建立一個基本的package.json文件。

E:\nodejs\hello>npm install

添加Grunt和Grunt插件到一個現有的package.json中最簡單的方式就是使用npm install <module> --save-dev命令。這不只會在本地安裝<module>，它還會使用一個波浪形字符的版本範圍自動將所安裝的<module>添加到項目依賴中。

安裝-save-dev就能夠了，直接把grunt做爲devDependencies寫入的package.json中。

E:\nodejs\hello>npm install grunt --save-dev

{
  "name": "hello",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "express": "~4.2.0",
    "static-favicon": "~1.0.0",
    "morgan": "~1.0.0",
    "cookie-parser": "~1.0.1",
    "body-parser": "~1.0.0",
    "debug": "~0.7.4",
    "ejs": "~0.8.5"
  },
  "devDependencies": {
    "grunt": "^0.4.5" }
}

上述命令也能夠用於Grunt插件和其餘的node模塊的安裝。當完成操做後請確保更新後的package.json文件也要與你的項目一塊兒提交。

而後，咱們再執行grunt，系統提示缺乏Gruntfile文件

E:\nodejs\hello>grunt
A valid Gruntfile could not be found. Please see the getting started guide for
more information on how to configure grunt: http://gruntjs.com/getting-started
Fatal error: Unable to find Gruntfile.

在原目錄下建立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/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });
  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // Default task(s).
  grunt.registerTask('default', ['uglify']);
};

一個Gruntfile由下面幾部分組成：

• "wrapper"函數(包裝函數)
• 項目和任務配置
• 加載的Grunt插件和任務
• 自定義任務

在上面的Gruntfile中，項目的元數據會從項目的package.json文件中導入到grunt配置中，同時grunt-contrib-uglify插件的uglify任務被配置用於壓縮一個源文件，同時使用該元數據(導入的元數據)動態的生成一個標語(banner)註釋。在命令行運行grunt時默認會運行uglify任務。

再次運行grunt，這時提示是grunt-contrib-uglify包找不到，是Gruntfile.js配置文件中的錯誤了。

E:\nodejs\hello>grunt
>> Local Npm module "grunt-contrib-uglify" not found. Is it installed?
Warning: Task "uglify" not found. Use --force to continue.

Aborted due to warnings.

由於package.json上沒有這個依賴庫，因此要編輯一下package.json

{
  "name": "hello",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "express": "~4.2.0",
    "static-favicon": "~1.0.0",
    "morgan": "~1.0.0",
    "cookie-parser": "~1.0.1",
    "body-parser": "~1.0.0",
    "debug": "~0.7.4",
    "ejs": "~0.8.5"
  },
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-uglify": "~0.2.4"
  }
}

注意，這裏使用的grunt-contrib-uglify版本是0.2.4

編輯完後就npm它一下

E:\nodejs\hello>npm install

根據這段代碼，咱們須要創建src和build文件夾

build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }

在src裏創建一個簡單的js文件，注意文件名要和根目錄名相同

var hello = function(name){
    return 'Hello ' + name;
}

再來執行grunt

E:\nodejs\hello>grunt
Running "uglify:build" (uglify) task
File "build/hello.min.js" created.

Done, without errors.

grunt運行正常，而且執行了uglify:build的任務。打開build/nodejs-grunt.min.js文件

/*! hello 2014-07-08 */
var hello=function(a){return"Hello "+a};

咱們能夠看到一個新生成的壓縮文件nodejs-grunt.min.js。

上面的例子，是一個js文件壓縮的例子。

 先寫到這，繼續熟悉咯~