Grunt搭建AngularJS项目

开始之前，确保环境已经安装了 node 和 grunt 。

通过在命令行输入 grunt 查看是否正确安装了grunt 。

通过在命令行输入 node 查看是否正确安装了node 。

生成 package.json 文件

这个 package.json 文件其实是 Node.js 来描述一个项目的文件，JSON 格式。生成这个文件超级简单，推荐用命令行交互式的生成一下：

使用 命令来生成 package.json 

[plain] view plain copy

1. npm init   

生成的package.json如下

[plain] view plain copy

1. {  
2.   "name": "Demo",  
3.   "version": "1.0.0",  
4.   "description": "一个例子",  
5.   "main": "index.js",  
6.   "scripts": {  
7.     "test": "echo \"Error: no test specified\" && exit 1"  
8.   },  
9.   "author": "",  
10.   "license": "ISC"  
11. }  

安装 Grunt 

首先安装 grunt 

[plain] view plain copy

1. npm install -g grunt-cli
   

表示通过 npm 安装了 grunt 到当前项目，同时加上了 —save-dev 参数，表示会 把刚安装的东西添加到 package.json 文件中 。不信你打开 package.json 文件看下，是不是多了

[plain] view plain copy

1. "devDependencies": {  
2.     "grunt": "^0.4.5"  
3.   }  

创建Grunt配置文件

创建一个Grunt的配置文件  Gruntfile.js，内容如下

[javascript] view plain copy

1. module.exports = function(grunt) {  
2.   grunt.initConfig({  
3.   });  
4.   
5. };

安装concat插件

concat插件用来将多个文件合并成一个文件。安装该插件的命令如下（在项目文件目录下）：

[plain] view plain copy

1. npm install grunt-contrib-concat --save-dev  

安装成功后，可以看到package.json里面多了grunt-contrib-concat

接下来在   Gruntfile.js对该插件进行配置

[javascript] view plain copy

1. module.exports = function(grunt) {  
2.   grunt.initConfig({  
3.      //读取package.json文件  
4.     pkg: grunt.file.readJSON('package.json'),  
5.     //concat用来合并js文件  
6.     concat: {  
7.       options: {  
8.         // 定义一个用于插入合并输出文件之间的字符  
9.         separator: ';'  
10.       },  
11.       dist: {  
12.         // 将要被合并的文件  
13.         src: ['app/src/**/*.js'],  
14.         // 合并后的JS文件的存放位置  
15.         dest: 'app/dist/<%= pkg.name %>.js'  
16.       }  
17.     },  
18.   });  
19.   
20.   grunt.loadNpmTasks('grunt-contrib-concat');  
21.   grunt.registerTask('test', ['concat']);  
22.   
23. };  

接下来在 app/src/目录下创建两个js文件， a.js 和 b.js  。

在命令行执行 grunt test 之后，会发生在 app/dist/文件夹下多个一个Demo.js文件，该文件合并了 a.js和b.js 。

[plain] view plain copy

1. grunt test  

安装uglify插件

uglify 插件用来对文件进行压缩。安装该插件的命令如下

[plain] view plain copy

1. npm install grunt-contrib-uglify --save-dev  

安装成功后，可以查看package.json里面是否多了grunt-contrib-uglify

接下来对 uglify进行配置。配置文件如下：

[javascript] view plain copy

1. module.exports = function(grunt) {  
2.   
3.   grunt.initConfig({  
4.      //读取package.json文件  
5.     pkg: grunt.file.readJSON('package.json'),  
6.     //concat用来合并js文件  
7.     concat: {  
8.       options: {  
9.         // 定义一个用于插入合并输出文件之间的字符  
10.         separator: ';'  
11.       },  
12.       dist: {  
13.         // 将要被合并的文件  
14.         src: ['app/src/**/*.js'],  
15.         // 合并后的JS文件的存放位置  
16.         dest: 'app/dist/<%= pkg.name %>.js'  
17.       }  
18.     },  
19.      //uglify用来压缩js文件  
20.     uglify: {  
21.       options: {  
22.         // 此处定义的banner注释将插入到输出文件的顶部  
23.         banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'  
24.       },  
25.       dist: {  
26.         files: {  
27.           //uglify会自动压缩concat任务中生成的文件  
28.           'app/dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']  
29.         }  
30.       }  
31.      },  
32.   });  
33.   
34.   grunt.loadNpmTasks('grunt-contrib-concat');  
35.   grunt.loadNpmTasks('grunt-contrib-uglify');  
36.   grunt.registerTask('test', ['concat','uglify']);  
37.   
38. };  

在命令行执行   grunt test ，可以看到 app/dist文件下多了Demo.min.js，该文件对Demo.js进行了压缩。

安装jshint插件

jshint插件用来对js的代码规范进行检查。安装该插件的命令为

[plain] view plain copy

1. npm install grunt-contrib-jshint --save-dev  

然后对jshint进行配置。配置文件如下（下面只贴部分代码，整体的配置文件在最后会给出）

[javascript] view plain copy

1. //jshint用来检查js代码规范  
2.   jshint: {   
3.     files: ['Gruntfile.js', 'app/src/**/*.js'], //要进行js检查的文件  
4.     options: {  
5.       //这里是覆盖JSHint默认配置的选项  
6.       globals: {  
7.         jQuery: true,  
8.         console: true,  
9.         module: true,  
10.         document: true  
11.       }  
12.     }  
13.   }  

[javascript] view plain copy

1. grunt.loadNpmTasks('grunt-contrib-jshint');  
2.  grunt.registerTask('test', ['jshint']);  

此时，输入 grunt test ， jshint便会对文件进行检查，并在控制台输出检查的结果

安装watch插件

watch用来监听文件，当文件发生变化时会执行tasks中指定的任务。安装该插件的命令为

[plain] view plain copy

1. npm install grunt-contrib-watch --save-dev  

然后对该插件进行配置

[javascript] view plain copy

1. //watch用来监听文件，当文件发生变化时会执行tasks中指定的任务  
2.    watch: {  
3.      //监听的文件  
4.      files: ['<%= jshint.files %>','app/index.html'],  
5.      tasks: ['jshint']  
6.    },  

[javascript] view plain copy

1. grunt.loadNpmTasks('grunt-contrib-watch');  
2.  grunt.registerTask('test', ['watch']);  

在命令行输入 grunt test之后，会发现watch启动，一直在监听文件的变化，当监听的文件发生变化时，会执行jshint命令来进行检查

安装wiredep插件

wiredep插件用来自动将bower_components中的包加入到index.html中 。

安装该插件的命令为

[plain] view plain copy

1. npm install grunt-wiredep --save-dev  

在配置文件中，对wiredep进行配置

[javascript] view plain copy

1. //watch用来监听文件，当文件发生变化时会执行tasks中指定的任务  
2.    watch: {  
3.      //监听的文件  
4.      files: ['<%= jshint.files %>','app/index.html'],  
5.      tasks: ['jshint']  
6.    },  

[javascript] view plain copy

1. grunt.loadNpmTasks('grunt-wiredep');  
2. grunt.registerTask('test', ['wiredep']);  

对于该命令的测试，在使用bower安装AngualrJS和Bootstrap时进行

使用bower安装angularjs和bootstrap

为了让wiredep插件能够自动将bower安装的插件注入到index.html中，我们先生成bower的配置文件，使用如下命令：

[plain] view plain copy

1. bower  init  

生成的文件如下：

[plain] view plain copy

1. {  
2.   "name": "Demo",  
3.   "description": "一个例子",  
4.   "main": "index.js",  
5.   "authors": [  
6.     "藏红 <[email protected]>"  
7.   ],  
8.   "license": "ISC",  
9.   "moduleType": [],  
10.   "homepage": "",  
11.   "ignore": [  
12.     "**/.*",  
13.     "node_modules",  
14.     "bower_components",  
15.     "test",  
16.     "tests"  
17.   ]  
18. }  

接着使用bower安装AngularJS

[plain] view plain copy

1. bower install angularjs --save grunt  

安装成功后，在bower.json会看到读了 grunt 和 angularjs

[plain] view plain copy

1. "dependencies": {  
2.     "angular": "angularjs#~1.4.8",  
3.     "grunt": "~0.4.5"  
4.   }  

然后在命令行运行 wiredep ，该插件会自动将angularjs加入到index.html中。运行前的index.html内容如下

[html] view plain copy

1. <!DOCTYPE html>  
2. <html lang="en">  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>How to use Grunt Wirdep</title>  
6.   <!-- bower:css -->  
7.   <!-- endbower -->  
8. </head>  
9. <body>  
10.   indexasdf123123  
11.   <!-- bower:js -->  
12.   <!-- endbower -->  
13. </body>  
14. </html>  

运行后的index.html命令如下

[html] view plain copy

1. <!DOCTYPE html>  
2. <html lang="en">  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>How to use Grunt Wirdep</title>  
6.   <!-- bower:css -->  
7.   <!-- endbower -->  
8. </head>  
9. <body>  
10.   indexasdf123123  
11.   <!-- bower:js -->  
12.   <script src="../bower_components/angular/angular.js"></script>  
13.   <!-- endbower -->  
14. </body>  
15. </html>  

接下来按相同的方式安装 bootstrap命令如下

[plain] view plain copy

1. bower install bootstrap -save  

在此运行 grunt test ，发现 index.html内容为

[html] view plain copy

1. <!DOCTYPE html>  
2. <html lang="en">  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>How to use Grunt Wirdep</title>  
6.   <!-- bower:css -->  
7.   <!-- endbower -->  
8. </head>  
9. <body>  
10.   indexasdf123123  
11.   <!-- bower:js -->  
12.   <script src="../bower_components/jquery/dist/jquery.js"></script>  
13.   <script src="../bower_components/angular/angular.js"></script>  
14.   <script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>  
15.   <!-- endbower -->  
16. </body>  
17. </html>  

bootstrap.js导入了，但bootstrap.css并未导入。不用担心，这是由 bootstrap的bower.json文件错误导致的，打开自己的bower.json文件，添加如下内容

[plain] view plain copy

1. "overrides": {  
2.    "bootstrap": {  
3.      "main": [  
4.        "dist/js/bootstrap.js",  
5.        "dist/css/bootstrap.css",  
6.        "less/bootstrap.less"  
7.          ]  
8.      }  
9.  }  

重新运行 grunt test，bootstrap.css被正确注入

[html] view plain copy

1. <!DOCTYPE html>  
2. <html lang="en">  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>How to use Grunt Wirdep</title>  
6.   <!-- bower:css -->  
7.   <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" />  
8.   <!-- endbower -->  
9. </head>  
10. <body>  
11.   indexasdf123123  
12.   <!-- bower:js -->  
13.   <script src="../bower_components/jquery/dist/jquery.js"></script>  
14.   <script src="../bower_components/angular/angular.js"></script>  
15.   <script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>  
16.   <!-- endbower -->  
17. </body>  
18. </html>  

安装connect插件

connect插件可以让前端project开启connect服务，安装命令如下：

[plain] view plain copy

1. npm install grunt-contrib-connect --save-dev  

在grunt配置文件中对connnect进行配置

[javascript] view plain copy

1. //服务器连接服务  
2.     connect: {    
3.         options: {  
4.           port: 9000,  
5.           hostname: 'localhost', //默认就是这个值，可配置为本机某个 IP，localhost 或域名  
6.           livereload: 35729  ,//声明给 watch 监听的端口  
7.          keepalive:true, //保持连接  
8.           },  
9.         server: {  
10.           options: {  
11.           open: true, //自动打开网页 http://  
12.           base: [  
13.               ''  //主目录  
14.                 ]  
15.             }  
16.         }  
17.         
18.     }  

[javascript] view plain copy

1. grunt.loadNpmTasks('grunt-contrib-connect');  
2. grunt.registerTask('test', ['connect']);  

通过grunt test 启动之后，会自动开启浏览器，打开app/index.html

完整的gruntfile.js

[javascript] view plain copy

1. module.exports = function(grunt) {  
2.   
3.   grunt.initConfig({  
4.      //读取package.json文件  
5.     pkg: grunt.file.readJSON('package.json'),  
6.     //concat用来合并js文件  
7.     concat: {  
8.       options: {  
9.         // 定义一个用于插入合并输出文件之间的字符  
10.         separator: ';'  
11.       },  
12.       dist: {  
13.         // 将要被合并的文件  
14.         src: ['app/src/**/*.js'],  
15.         // 合并后的JS文件的存放位置  
16.         dest: 'app/dist/<%= pkg.name %>.js'  
17.       }  
18.     },  
19.      //uglify用来压缩js文件  
20.     uglify: {  
21.       options: {  
22.         // 此处定义的banner注释将插入到输出文件的顶部  
23.         banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'  
24.       },  
25.       dist: {  
26.         files: {  
27.           //uglify会自动压缩concat任务中生成的文件  
28.           'app/dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']  
29.         }  
30.       }  
31.      },  
32.     //jshint用来检查js代码规范  
33.     jshint: {   
34.       files: ['Gruntfile.js', 'app/src/**/*.js'], //要进行js检查的文件  
35.       options: {  
36.         //这里是覆盖JSHint默认配置的选项  
37.         globals: {  
38.           jQuery: true,  
39.           console: true,  
40.           module: true,  
41.           document: true  
42.         }  
43.       }  
44.     },  
45.     //watch用来监听文件，当文件发生变化时会执行tasks中指定的任务  
46.     watch: {  
47.       //监听的文件  
48.       files: ['<%= jshint.files %>','app/index.html'],  
49.       tasks: ['jshint']  
50.     },  
51.     //wiredep自动将bower_components中的包加入到index.html中  
52.     wiredep: {  
53.       task: {  
54.         src: ['app/index.html']  
55.       }  
56.     },  
57.     //服务器连接服务  
58.     connect: {    
59.         options: {  
60.           port: 9000,  
61.           hostname: 'localhost', //默认就是这个值，可配置为本机某个 IP，localhost 或域名  
62.           livereload: 35729  //声明给 watch 监听的端口  
63.           },  
64.         server: {  
65.           options: {  
66.           open: true, //自动打开网页 http://  
67.           base: [  
68.               'app'  //主目录  
69.                 ]  
70.             }  
71.         }  
72.         
73.     }  
74.   });  
75.   
76.   grunt.loadNpmTasks('grunt-contrib-concat');  
77.   grunt.loadNpmTasks('grunt-contrib-uglify');  
78.   grunt.loadNpmTasks('grunt-contrib-jshint');  
79.   grunt.loadNpmTasks('grunt-contrib-watch');  
80.   grunt.loadNpmTasks('grunt-wiredep');  
81.   grunt.loadNpmTasks('grunt-contrib-connect');  
82.   grunt.registerTask('test', ['concat','connect','wiredep','uglify','jshint','watch']);  
83.   
84. };