大佬教程收集整理的这篇文章主要介绍了grunt的简单使用,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
关于grunt的使用主要是两个文件的配置:
1.是gruntfile
2.是packagejson
首先是安装插件:
"connect-livereload": "^0.5.2","grunt-contrib-connect": "^0.9.0","grunt-contrib-watch": "^0.6.1","load-grunt-tasks": "^1.0.0","time-grunt": "^0.3.1","grunt-contrib-cssmin": "^2.1.0","grunt-contrib-htmlmin": "^2.3.0","grunt-usemin": "^3.1.1",执行命令npm install xxx插件名 --save-dev安装到devdependece中
build执行的是压缩任务,dev执行运行调试
gruntfile中:
中添加npm任务;
require('load-grunt-tasks')(grunt);执行的是grunt.loadnpmtasks的任务
然后是其他任务配置:
grunt.initConfig({ watch: { //dev为定义监测任务的名字 dev: { files: ['src/*.*'],options: { livereload: 3030 } } },//grunt-contrib-connect配置启动连接的Web服务器,是主要插件 connect: { dev: { options: { base: "src/html",//服务器端口 port: 2222,// 服务器地址(可以使用主机名localhost,也能使用Ip) hostname: '*',livereload: 3030,//页面自动刷新 open: { target: 'http://127.0.0.2:2222'//target url to open,目标路径 } } } },
grunt.registerTask('dev',['connect:dev','watch:dev']);
然后是build命令压缩html和css文件:
//压缩CSS cssmin:{ target:{ files:[{ expand:true,cwd:'src/css',src:['*.css'],dest:'src_dest/css',//ext:'.min.css' }] } },//处理html中css、js 引入合并问题 usemin: { html: 'src_dest/*.html' },//压缩HTML htmlmin:{ options:{ removeComments: true,removeCommentsFromCDATA: true,collapseWhitespace: true,collapseBooleanAttributes: true,removeAttributeQuotes: true,removeRedundantAttributes: true,useShortDoctype: true,removeEmptyAttributes: true,removeOptionalTags: true },html:{ files:[{ expand: true,cwd: 'src/html',src: ['*.html'],dest: 'src_dest/html' }] } }cwd指定被压缩文件目录
dest是指定压缩的目标目录
sec指定压缩的文件
执行npm run build即可
这就是我简单的学习了
以上是大佬教程为你收集整理的grunt的简单使用全部内容,希望文章能够帮你解决grunt的简单使用所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。