這里為了節(jié)省時(shí)間，這里先創(chuàng)建一個(gè)angular 項(xiàng)目
cd /Users/yuyi/Documents/workSpace
ng new GruntDome
項(xiàng)目名稱 GruntTest
目錄js a.js main b.js package.json Gruntfile.js
devDependencies 開(kāi)發(fā)依賴
Grunt介紹
Grunt是一個(gè)自動(dòng)化的項(xiàng)目構(gòu)建工具。如果你需要重復(fù)的執(zhí)行像壓縮、 編譯、 單元測(cè)試、代碼檢查以及打包發(fā)布的任務(wù)。 那么你可以使用Grunt來(lái)處理這些任務(wù)， 你所需要做的只是配置好Grunt， 這樣能很大程度的簡(jiǎn)化你的工作。
grunt安裝
Grunt和Grunt插件都是通過(guò)npm、Node.js包管理器安裝和管理的。實(shí)際上，安裝的并不是Grunt，而是Grunt-cli，也就是命令行的Grunt，這樣你就可以使用grunt命令來(lái)執(zhí)行項(xiàng)目中的Gruntfile.js中定義的task。但是要注意，Grunt-cli只是一個(gè)命令行工具，用來(lái)執(zhí)行，而不是Grunt這個(gè)工具本身。下面的代碼可以在全局范圍安裝Grunt-cli，全局安裝，會(huì)有權(quán)限的問(wèn)題，所以Linux環(huán)境下 前面加sudo，Windows用管理員權(quán)限。
sudo npm install -g grunt-cli
安裝成功，版本號(hào)1.2.0
然后在具體的項(xiàng)目中，安裝grunt。
cd /Users/yuyi/Desktop/GruntTest
npm install grunt --save-dev
--save-dev 的意思是，在當(dāng)前目錄安裝grunt的同時(shí)，順便把grunt保存為這個(gè)目錄的開(kāi)發(fā)依賴項(xiàng)?？梢栽趐ackage.json的“devDependencies”中就會(huì)存儲(chǔ)開(kāi)發(fā)依賴項(xiàng)。
而且多出了一個(gè)"node_modules"文件夾，里面的grunt文件夾就是存儲(chǔ)grunt源文件的地方。
現(xiàn)在，在終端里面運(yùn)行g(shù)runt命令，會(huì)報(bào)錯(cuò) Fatal error: Unable to find Gruntfile.這個(gè)就是缺少Gruntfile.js文件。
配置Gruntfile.js
首先來(lái)配置一個(gè)最簡(jiǎn)單的：
module.exports = function(grunt) {
grunt.initConfig({
});
grunt.registerTask('default', []);
};
然后，運(yùn)行g(shù)runt。這里顯示.done，表示通過(guò)。
安裝Grunt插件
下面是幾個(gè)最常用的插件
Contrib-jshint——javascript語(yǔ)法錯(cuò)誤檢查；
Contrib-watch——實(shí)時(shí)監(jiān)控文件變化、調(diào)用相應(yīng)的任務(wù)重新執(zhí)行；
Contrib-clean——清空文件、文件夾；
Contrib-uglify——壓縮javascript代碼
Contrib-copy——復(fù)制文件、文件夾
Contrib-concat——合并多個(gè)文件的代碼到一個(gè)文件中
karma——前端自動(dòng)化測(cè)試工具
先看uglify插件，這個(gè)是壓手JS代碼的?？纯磶缀趺總€(gè)類庫(kù)或者框架，都有一個(gè)***.min.js壓縮版。
安裝插件的方式和安裝grunt一樣。
npm install grunt-contrib-uglify --save-dev
然后再src目錄下新建test.js，然后隨便寫(xiě)一點(diǎn)代碼。然后要把這個(gè)js文件進(jìn)行壓縮。
壓縮哪個(gè)文件，和往哪里壓縮都需要在Gruntfile.js里面配置。
uglify: {
options: {},
build: {
src: ['src/test.js'],
dest: 'src/app.min.js'
}
}
//加載配置
grunt.loadNpmTasks('grunt-contrib-uglify');
options參數(shù)具體可以參照官網(wǎng)，有帶有banner的？。build添加的任務(wù)，當(dāng)然可以多個(gè)任務(wù)，SPA就是這么做的。src:是目標(biāo)文件，dest是導(dǎo)出的文件。
然后看看最常用的代碼檢查插件jshint
sudo npm install grunt-contrib-jshint
安裝成功然后，在Gruntfile.js配置一下，才能正常使用。配置如下
/jshint代碼檢查插件的配置信息/
jshint: {
build: ['Gruntfile.js', 'src/*.js'],
options: {
jshintrc: '.jshintrc'
}
}
//加載配置
grunt.loadNpmTasks('grunt-contrib-jshint');
http://www.itdecent.cn/p/4cb23f9e19d3
任務(wù)配置代碼、插件加載代碼、任務(wù)注冊(cè)代碼
