前面我们安装了Grunt，现在来说说怎么使用这东西了。一些基本的之前也说了，现在看Gruntfile.js里的东西（文档中使用的js是 JavaScript 制作圆形时钟 中的js文件）：
1. // 定义一个模块 并且导出一个wrapper函数
2. module.exports = function(grunt) {
3. // 初始化grunt配置
4. grunt.initConfig({
5. // 动作 concat的作用将连接多个文件为一个文件
6. concat:{
7. // 动作的选项
8. options:{
9. banner:'/*智游教育*/\n'
10. },
11. // 动作涉及的文件
12. dvst:{
13. // 要连接的文件
14. src:['js/control.js','js/Diamond.js','js/dot.js',
15. 'js/second.js','js/Minute.js','js/hour.js',
16. 'js/clock.js'
17. ],
18. // 连接后生成的文件
19. dest:'js/myclock.js'
20. }
21. },
22. uglify:{
23. // 目标文件
24. my_target:{
25. // 涉及的文件
26. files:{
27. // 压缩后生成的文件 ： 需要压缩的文件列表
28. 'js/myclock.min.js':['js/control.js','js/Diamond.js','js/dot.js',
29. 'js/second.js','js/Minute.js','js/hour.js',
30. 'js/clock.js'
31. ]
32. }
33. }
34. }
35. })
36. grunt.loadNpmTasks('grunt-contrib-concat')
37. grunt.loadNpmTasks('grunt-contrib-uglify')
38. // 加载grunt插件模块包
39. grunt.registerTask('default',['concat','uglify'])
40. // registerTask注册任务可以使用名执行已注册任务
41. // 注册之后可以使用grunt命令执行任务 可以注册多个任务
42. // 如果任务名称是default就是默认任务 第一个参数任务名字 第二个参数具体要执行的动作
43. };
还有一种方法是这样的：
**package.json**中的代码：
1. {
2. "name": "zy-clock",
3. "version": "1.0.0",
4. "description": "",
5. "main": "index.js ",
6. "srcFile": [
7. "src/js/control.js",
8. "src/js/dot.js",
9. "src/js/js/second.js",
10. "src/js/Minute.js",
11. "src/js/hour.js",
12. "src/js/Diamond.js"
13. ],
14. "scripts": {
15. "test": "echo \"Error: no test specified\" && exit 1"
16. },
17. "author": "",
18. "license": "ISC",
19. "devDependencies": {
20. "grunt": "^1.0.1",
21. "grunt-contrib-concat": "^1.0.1",
22. "grunt-contrib-cssmin": "^2.2.1",
23. "grunt-contrib-jshint": "^1.1.0",
24. "grunt-contrib-uglify": "^3.0.1",
25. "grunt-contrib-watch": "^1.0.0"
26. }
27. }
**gruntfile.js**的代码：
1. // 使用grunt时package.json里面name的名字或值
2. // 不能与项目名同名
3. module.exports = function(grunt) {
4. grunt.initConfig({
5. // 读取项目的配置信息
6. package:grunt.file.readJSON('package.json'),
7. concat:{
8. options:{
9. banner:'/*智游教育*/\n'
10. },
11. dist:{
12. // 要拼接的文件列表
13. // <%=package.srcFile%><% %>将会展开package.srcFile的值
14. src:'<%=package.srcFile%>',
15. dest:'js/<%=package.name%>.js'
16. // css合并
17. // src:'css/*.css',
18. // dest:'css/index1.css'
19. }
20. },
21. // css压缩
22. uglify:{
23. my_target:{
24. files:{
25. 'js/<%=package.name%>.min.js':'js/<%=package.name%>.js'
26. }
27. }
28. },
29.
30.
31. // css压缩
32. cssmin:{
33. target:{
34. files:{
35. // 执行后生成的文件：执行的文件
36. 'css/index.min.css':'css/*.css'
37. }
38. }
39. },
40. // 监视文件变化动作
41. // watch:{
42. // // 监视一组文件 当文件变化时执行响应的动作或任务
43. // scripts:{
44. // files:['gruntfile.js'],
45. // // 当文件变化时要执行的任务 运行grunt watch
46. // // tasks:['default']
47. // }
48. // },
49.
50.
51. // 检查javascript语法
52. jshint:{
53. options:{
54. // 循环条件语句必须使用花括号和分号
55. curly:true,
56. // 兼容低级浏览器
57. es3:false,
58. // 禁止重写原生对象的原型 Array
59. freeze:true,
60. // 构造函数首字母必须大写
61. nemcap:true,
62. // 为true时禁止单引号和双引号
63. 'quotmark':true,
64. // 变量未使用
65. 'unused':false,
66. // 禁止定义之前使用变量 忽略function函数声明
67. latedef:'nofunc'
68.
69. },
70. files:'js/alert.js'
71. }
72.
73. })
74.
75. grunt.loadNpmTasks('grunt-contrib-concat')
76. grunt.loadNpmTasks('grunt-contrib-uglify')
77. grunt.loadNpmTasks('grunt-contrib-cssmin')
78. // grunt.loadNpmTasks('grunt-contrib-watch')
79. grunt.loadNpmTasks('grunt-contrib-jshint')
80. grunt.registerTask('default',['jshint'])
81. }