Grunt的使用

黄良钵

分类: 程序开发 764 1

前面我们安装了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.         // css压缩
  30.         cssmin:{
  31.             target:{
  32.                 files:{
  33.                     // 执行后生成的文件:执行的文件
  34.                     'css/index.min.css':'css/*.css'
  35.                 }
  36.             }
  37.         },
  38.         // 监视文件变化动作
  39.         // watch:{
  40.         //     // 监视一组文件 当文件变化时执行响应的动作或任务
  41.         //     scripts:{
  42.         //         files:['gruntfile.js'],
  43.         //         // 当文件变化时要执行的任务 运行grunt watch
  44.         //         // tasks:['default']
  45.         //     }
  46.         // },
  47.         // 检查javascript语法
  48.        jshint:{
  49.            options:{
  50.             //    循环条件语句必须使用花括号和分号 
  51.                curly:true,
  52.             //    兼容低级浏览器
  53.                es3:false,
  54.             //    禁止重写原生对象的原型 Array
  55.                freeze:true,
  56.             //    构造函数首字母必须大写
  57.                nemcap:true,
  58.             //    为true时禁止单引号和双引号
  59.                'quotmark':true,
  60.             //    变量未使用
  61.                'unused':false,
  62.             //    禁止定义之前使用变量 忽略function函数声明
  63.                latedef:'nofunc'
  64.            },
  65.          files:'js/alert.js'
  66.        }
  67.    })
  68.     grunt.loadNpmTasks('grunt-contrib-concat')
  69.     grunt.loadNpmTasks('grunt-contrib-uglify')
  70.     grunt.loadNpmTasks('grunt-contrib-cssmin')
  71.     // grunt.loadNpmTasks('grunt-contrib-watch')
  72.     grunt.loadNpmTasks('grunt-contrib-jshint')
  73.     grunt.registerTask('default',['jshint'])
  74. }
  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
Grunt

作者简介: 黄良钵

打赏

博客站长,前端开发工程师

共 1 条评论关于 “Grunt的使用”

Loading...