使用Grunt構建自動化開發環境

一、準備工做

1）首頁確保電腦上網，以及可以訪問https://registry.npmjs.org/，因需今後網站中下載安裝相應的插件;

2）電腦安裝Node.js，Grunt及Grunt插件都是基於node.js運行的；若是你電腦上未裝node.js，到nodejs官網https://nodejs.org/下載相應版本安裝吧；

3）安裝grunt-CLI，要想使用grunt，須要將grunt-CLI安裝到全局環境中，使用nodejs的」npm install」進行安裝；

打開控制檯（windows系統下使用管理員權限打開），輸入：npm install –g grunt-cli，而後敲擊回車。

要檢查是否已經安裝grunt-cli並生效，只需輸入grunt命令，敲擊回車，若是出現下圖結果，即表示你已成功安裝grunt-cli。

二、建立一個簡單的測試

在本機的項目目錄中建立GruntTest目錄（包括build，src，test，node_modules爲安裝插件時自動生成），兩個文件（Gruntfile.js，package.json，注意第一個文件名首字母大寫）。

其中package.json格式以下：

{ "name": "Grunt_test", "version": "0.0.1", "dependencies": {}, "devDependencies": { }}

插件安裝以後，package.json以下圖所示。

三、安裝Grunt

從控制檯中進入到剛纔建立的目錄中，輸入如下命令：npm install grunt --save-dev（注意save前是兩個-），其中--save-dev的意思是在安裝grunt的同時，把grunt保存爲這個目錄的開發依賴項。這個依賴項的配置即爲package.json中的devDependencies對應的配置。

grunt安裝成功以後，在package.json文件中的devDependencies屬性中會自動添加上"grunt": "^0.4.5"。目錄中會自動建立node_modules文件夾，其中會有一個grunt的文件夾。

四、配置Gruntfile.js文件

首先把Gruntfile.js配置成以下格式：

/**
* Created by Jack on 2015-10-19.
*/
//包裝函數
module.exports=function(grunt){
grunt.initConfig({
//獲取package.json中的信息
pkg:grunt.file.readJSON('package.json'),
//JS文件壓縮
 uglify:{
options:{
stripBanners:true,
banner:'/* <%=pkg.name%>-<%=pkg.version%>.js <%=grunt.template.today("yyyy-mm-dd")%> */\n'
},
build:{
src:'src/test.js',//原文件路徑
dest:'build/js/<%=pkg.name%>-<%=pkg.version%>.min.js'//壓縮後文件路徑
 }
},
//CSS文件壓縮
 cssmin: {
options: {
shorthandCompacting: false,
roundingPrecision: -1
},
target: {
/*files: {
'output.css': ['foo.css', 'bar.css']//合併兩個文件到一個文件
}*/
files: [{
expand: true,
cwd: 'src/',//原文件目錄
src: ['*.css', '!*.min.css'],
dest: 'build/css',//壓縮後文件目錄
ext: '.min.css'
}]
}
},
//JS文件錯誤提示
 jshint:{
build:['Gruntfile.js','src/*.js'],
options:{
jshintrc:'g.jshintrc'
}
},
watch: {
scripts: {
files: ['src/*.js','src/*.css'],
tasks: ['jshint','uglify','cssmin'],
options: {
spawn: false
}
}
}
});
//告訴grunt咱們將要加載的插件
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
//告訴grunt當咱們在終端中輸入grunt時須要作哪些操做（注意前後順序）
grunt.registerTask('default',['jshint','uglify','cssmin','watch']);
};

五、Grunt插件安裝

進入grunt官網的插件列表頁面 http://www.gruntjs.net/plugins ，咱們能看到grunt到目前爲止的全部插件。

插件分爲兩類。第一類是grunt團隊貢獻的插件，這些插件的名字前面都帶有「contrib-」前綴，並且在插件列表中有星號標註。第二類是第三方提供的插件，不帶有這兩個特徵。

Contrib-jshint——javascript語法錯誤檢查；

Contrib-watch——實時監控文件變化、調用相應的任務從新執行；

Contrib-clean——清空文件、文件夾；

Contrib-uglify——壓縮javascript代碼

Contrib-copy——複製文件、文件夾

Contrib-concat——合併多個文件的代碼到一個文件中

karma——前端自動化測試工具

安裝插件命令爲：npm install grunt-contrib-uglify --save-dev格式。

六、使用uglify插件

Uglify插件的功能就是壓縮javascript代碼。安裝方式：npm install grunt-contrib-uglify --save-dev，安裝成功以後package.json文件會自動添加相應配置，node_modules目錄中也會建立相應的插件目錄。

使用uglify來壓縮javascript代碼，首先在src目錄中建立一個」test.js」

 

/**
* Created by Jack on 2015-10-20.
*/
(function(window,undefined){
function add(a,b){
return a+b;
}
add(10,20);
})(window);
function test(a,b,c){
return a+b*c;
}

第一步：在Gruntfile.js中進行配置。

/**
* Created by Jack on 2015-10-19.
*/
//包裝函數
module.exports=function(grunt){
grunt.initConfig({
//獲取package.json中的信息
pkg:grunt.file.readJSON('package.json'),
//JS文件壓縮
 uglify:{
options:{
stripBanners:true,
banner:'/* <%=pkg.name%>-<%=pkg.version%>.js <%=grunt.template.today("yyyy-mm-dd")%> */\n'
},
build:{
src:'src/test.js',//原文件路徑
dest:'build/js/<%=pkg.name%>-<%=pkg.version%>.min.js'//壓縮後文件路徑
 }
},
//CSS文件壓縮
 cssmin: {
options: {
shorthandCompacting: false,
roundingPrecision: -1
},
target: {
/*files: {
'output.css': ['foo.css', 'bar.css']//合併兩個文件到一個文件
}*/
files: [{
expand: true,
cwd: 'src/',//原文件目錄
src: ['*.css', '!*.min.css'],
dest: 'build/css',//壓縮後文件目錄
ext: '.min.css'
}]
}
},
//JS文件錯誤提示
 jshint:{
build:['Gruntfile.js','src/*.js'],
options:{
jshintrc:'g.jshintrc'
}
},
watch: {
scripts: {
files: ['src/*.js','src/*.css'],
tasks: ['jshint','uglify','cssmin'],
options: {
spawn: false
}
}
}
});
//告訴grunt咱們將要加載的插件
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
//告訴grunt當咱們在終端中輸入grunt時須要作哪些操做（注意前後順序）
grunt.registerTask('default',['jshint','uglify','cssmin','watch']);
};

 

對uglify的配置有兩項：

　　「options」中規定容許生成的壓縮文件帶banner，即在生成的壓縮文件第一行加一句話說明。注意，其中使用到了pkg獲取package.json的內容。

　　「build」中配置了源文件和目標文件。即規定了要壓縮誰？壓縮以後會生成誰？注意，咱們這裏將目標文件的文件名經過pkg的name和version來命名。

（PS：上文中說過的package.json的內容終於找到了他被應用的地方了。這樣的好處是：例如，對文件版本的管理，你只須要在package.json中修改便可，grunt會自動根據最新的版本號生成相應版本的文件。你不用手動去修改文件的文件名。）

第二步：在 grunt.initConfig 方法以後，要讓grunt去加載這一個插件。光配置了，不加載上，如何用啊？

grunt.loadNpmTasks('grunt-contrib-uglify');

第三步：在grunt命令執行時，要不要當即執行uglify插件？若是要，就寫上，不然不寫。我如今是須要的，因此我寫上。也有可能不須要，這種狀況誰知道呢？

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

七、其它插件

若是使用其它插件，可先進行安裝，而後進行配置，加載插件，註冊任務插件。具體使用說明可進入http://www.gruntjs.net/plugins網站中點擊相應的插件查看相應的配置說明。