• 当前标签:Grunt

程序开发 Grunt的使用

前面我们安装了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']) }

2017-08-11 20:30:52 39 1 0
阅读详情

程序开发 Grunt的安装

安装Grunt npm init 初始化一个package.json npm install -g grunt-cli  把grunt安装到系统文件夹中 创建gruntfile.js 不能使用其它名字 必须与package.json 在同一级 安装grunt: npm i grunt --save-dev 写自己的所需要的需求 添加自己所需要的插件:npm i grunt-contrib-concat --save-dev 在终端上运行grunt 建议使用淘宝npm镜像,安装命令: npm install -g cnpm --registry=https://registry.npm.taobao.org 安装淘宝的npm镜像后,安装npm模块可以使用: cnpm install [name]   注册一个代码测试的任务 grunt.loadNpmTasks('插件类型') 合并代码的任务 grunt.loadNpmTasks('grunt-contrib-concat') 压缩js文件 grunt.loadNpmTasks('grunt-contrib-uglify') 压缩css文件 grunt.loadNpmTasks('grunt-contrib-cssmin')   wath插件 监视文件变动 做出相应动作 grunt.loadNpmTasks('grunt-contrib-watch') 运行 grunt watch 默认执行的任务列表 grunt.registerTask('default',['','','',]) grunt-contrib-clean 删除文件 grunt-contrib-compass 编译sass文件 grunt-contrib-copy 复制文件    

2017-08-11 20:25:21 24 0 0
阅读详情
  • 1
前往