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 183 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 188 0 0

阅读详情

黄良钵博客

程序开发 Grunt的使用

程序开发 Grunt的安装

崔先森

崔先森

Holyrisk

轩陌

崔先森

挖站否

阿凯

崔先森

清靈語

崔先森