前端構建工具－grunt介紹

###前端構建工具－grunt介紹

grunt是一款優秀的前端構建工具（自動化工具）。對於須要反覆重複的任務，例如壓縮、編譯、單元測試等，自動化工具能夠減輕你的勞動，簡化你的工做。當你在 Gruntfile 文件正確配置好了任務，任務運行器就會自動幫你完成大部分無聊的工做。

###grunt的安裝

• 安裝最新版node.js(node.js包含npm，因此不用安裝npm)

• 全局安裝grunt命令行 npm install grunt-cli -g

• 構建一個簡單的前端網站 目錄結構以下：

└── grunt-test
    ├── Gruntfile.js
    ├── build
    ├── package.json
    ├── src
    │   └── grunt-test.js
    └── test

package.json文件內容以下：

{
  "name": "grunt-test",
  "version": "1.0.0",
  "devDependencies": {
   
  }
}

• 安裝grunt npm install grunt --save-dev 添加--save-dev自動會將依賴寫入package.json

"devDependencies": {
    "grunt": "^1.0.1"
  }

• 配置Gruntfile.js

module.exports = function(grunt) {
//任務配置，全部插件的配置信息
grunt.initConfig({
	//獲取package.json信息
    pkg: grunt.file.readJSON('package.json'),
   
});

//輸入grunt後的動做（注意先後順序）
grunt.registerTask('default', []);
};

此時終端輸入grunt即可以運行，可是此時的grunt什麼也作不了，接下來給grunt安裝插件

####grunt的安裝插件

• 安裝grunt插件 插件介紹:

Contrib-jshint——javascript語法錯誤檢查；
	Contrib-watch——實時監控文件變化、調用相應的任務從新執行；
	Contrib-clean——清空文件、文件夾；
	Contrib-uglify——壓縮javascript代碼
	Contrib-copy——文件、文件夾
	Contrib-concat——合併多個文件的代碼到一個文件中
	karma——前端自動化測試工具

#####grunt的安裝插件示例 jshint安裝示例：

• npm安裝同時將依賴寫入package.json npm install grunt-contrib-jshint --save-dev

• 配置Gruntfile.js

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        //配置插件
        jshint: {
            files: ['src/*.js'],
            options: {
                jshintrc: '.jshintrc'
            }
        }
    });
    //載入插件
    grunt.loadNpmTasks('grunt-contrib-jshint');

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

• 其餘插件的安裝相似

安裝watch後的代碼下載地址：

https://github.com/wjingkunwang/notes/tree/master/front/code/grunt-test

參閱文章：

http://www.lxway.com/21821.htm

http://blog.fens.me/nodejs-grunt-intro/