1. 首页
  2. 文章中心
  3. Other

Grunt搭建AngularJS项目

101 阅读 0 评论
我是靠谱客的博主 可耐蛋挞，最近开发中收集的这篇文章主要介绍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.     "藏红 <canghong.ch@alibaba-inc.com>"  
  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. }; 

最后

以上就是可耐蛋挞为你收集整理的Grunt搭建AngularJS项目的全部内容，希望文章能够帮你解决Grunt搭建AngularJS项目所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(67)

相关文章

pm2使用心得
pm2使用心得
高并发Nodejs参数调整
高并发Nodejs参数调整
如何在同一台服务器起多个pm2进程
如何在同一台服务器起多个pm2进程
node单线程实现高并发原理与node异步I/O
node单线程实现高并发原理与node异步I/O
Grunt搭建AngularJS项目
Grunt搭建AngularJS项目
Node.js开发入门—使用AngularJSAngularJS是什么AngularJS的学习资源在Node.js中支持AngularJS在HTML文档中使用AngularJS在jade模板中使用AngularJS
Node.js开发入门—使用AngularJSAngularJS是什么AngularJS的学习资源在Node.js中支持AngularJS在HTML文档中使用AngularJS在jade模板中使用AngularJS
安装Yeoman + Bower + Grunt 创建angularjs 项目结构（新手笔记一）
安装Yeoman + Bower + Grunt 创建angularjs 项目结构（新手笔记一）
angularjs ngdocs 使用grunt生成api文档说明
angularjs ngdocs 使用grunt生成api文档说明

评论列表共有 0 条评论

立即
投稿
返回
顶部