前面我们安装了Grunt，现在来说说怎么使用这东西了。一些基本的之前也说了，现在看Gruntfile.js里的东西（文档中使用的js是 JavaScript 制作圆形时钟 中的js文件）：
- // 定义一个模块 并且导出一个wrapper函数
- module.exports = function(grunt) {
- // 初始化grunt配置
- grunt.initConfig({
- // 动作 concat的作用将连接多个文件为一个文件
- concat:{
- // 动作的选项
- options:{
- banner:'/*智游教育*/\n'
- },
- // 动作涉及的文件
- dvst:{
- // 要连接的文件
- src:['js/control.js','js/Diamond.js','js/dot.js',
- 'js/second.js','js/Minute.js','js/hour.js',
- 'js/clock.js'
- ],
- // 连接后生成的文件
- dest:'js/myclock.js'
- }
- },
- uglify:{
- // 目标文件
- my_target:{
- // 涉及的文件
- files:{
- // 压缩后生成的文件 ： 需要压缩的文件列表
- 'js/myclock.min.js':['js/control.js','js/Diamond.js','js/dot.js',
- 'js/second.js','js/Minute.js','js/hour.js',
- 'js/clock.js'
- ]
- }
- }
- }
- })
- grunt.loadNpmTasks('grunt-contrib-concat')
- grunt.loadNpmTasks('grunt-contrib-uglify')
- // 加载grunt插件模块包
- grunt.registerTask('default',['concat','uglify'])
- // registerTask注册任务可以使用名执行已注册任务
- // 注册之后可以使用grunt命令执行任务 可以注册多个任务
- // 如果任务名称是default就是默认任务 第一个参数任务名字 第二个参数具体要执行的动作
- };
还有一种方法是这样的：
package.json中的代码：
- {
- "name": "zy-clock",
- "version": "1.0.0",
- "description": "",
- "main": "index.js ",
- "srcFile": [
- "src/js/control.js",
- "src/js/dot.js",
- "src/js/js/second.js",
- "src/js/Minute.js",
- "src/js/hour.js",
- "src/js/Diamond.js"
- ],
- "scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
- },
- "author": "",
- "license": "ISC",
- "devDependencies": {
- "grunt": "^1.0.1",
- "grunt-contrib-concat": "^1.0.1",
- "grunt-contrib-cssmin": "^2.2.1",
- "grunt-contrib-jshint": "^1.1.0",
- "grunt-contrib-uglify": "^3.0.1",
- "grunt-contrib-watch": "^1.0.0"
- }
- }
gruntfile.js的代码：
- // 使用grunt时package.json里面name的名字或值
- // 不能与项目名同名
- module.exports = function(grunt) {
- grunt.initConfig({
- // 读取项目的配置信息
- package:grunt.file.readJSON('package.json'),
- concat:{
- options:{
- banner:'/*智游教育*/\n'
- },
- dist:{
- // 要拼接的文件列表
- // <%=package.srcFile%><% %>将会展开package.srcFile的值
- src:'<%=package.srcFile%>',
- dest:'js/<%=package.name%>.js'
- // css合并
- // src:'css/*.css',
- // dest:'css/index1.css'
- }
- },
- // css压缩
- uglify:{
- my_target:{
- files:{
- 'js/<%=package.name%>.min.js':'js/<%=package.name%>.js'
- }
- }
- },
- // css压缩
- cssmin:{
- target:{
- files:{
- // 执行后生成的文件：执行的文件
- 'css/index.min.css':'css/*.css'
- }
- }
- },
- // 监视文件变化动作
- // watch:{
- // // 监视一组文件 当文件变化时执行响应的动作或任务
- // scripts:{
- // files:['gruntfile.js'],
- // // 当文件变化时要执行的任务 运行grunt watch
- // // tasks:['default']
- // }
- // },
- // 检查javascript语法
- jshint:{
- options:{
- // 循环条件语句必须使用花括号和分号
- curly:true,
- // 兼容低级浏览器
- es3:false,
- // 禁止重写原生对象的原型 Array
- freeze:true,
- // 构造函数首字母必须大写
- nemcap:true,
- // 为true时禁止单引号和双引号
- 'quotmark':true,
- // 变量未使用
- 'unused':false,
- // 禁止定义之前使用变量 忽略function函数声明
- latedef:'nofunc'
- },
- files:'js/alert.js'
- }
- })
- grunt.loadNpmTasks('grunt-contrib-concat')
- grunt.loadNpmTasks('grunt-contrib-uglify')
- grunt.loadNpmTasks('grunt-contrib-cssmin')
- // grunt.loadNpmTasks('grunt-contrib-watch')
- grunt.loadNpmTasks('grunt-contrib-jshint')
- grunt.registerTask('default',['jshint'])
- }
Grunt这东西没怎么用过！博主他分享的精神值得比哦啊样！