Grunt的配置及liveReload功能实例
更新日期:
Grunt的介绍
Grunt是一个自动化的项目构建工具,配置好Grunt可以完成压缩,代码检查,单元测试等任务。C/C++有makefile,Java有Maven,Nodejs有grunt~
Grunt常用的插件有:
1).grunt-contrib-uglify:压缩js代码
2).grunt-contrib-concat:合并js文件
3).grunt-contrib-qunit:单元测试
4).grunt-contrib-jshint:js代码检查
5).grunt-contrib-watch:文件监控
关于这些插件的使用 grunt让Nodejs规范起来 这篇文章已经做了详细的介绍,此就不多说了。
完整实例
此实例完成的工作为:保存代码后网页自动刷新,即时查看代码效果
安装 grunt-cli(先保证nodejs安装完成)
grunt-cli 安装完成
全局安装grunt
grunt安装完成
安装grunt到本项目中
安装完毕
—save-dev自动将依赖写入了package.json
执行grunt 发现报错了
原来是缺少gruntfile.js
创建gruntfile.js
(此处是livereload功能的示例,需下载这个chrome扩展程序,配合使用,功能:可以保存代码后网页自动刷新,即时查看代码效果)
gruntfile.js 内容:
|
|
再次执行 又报错了
是没找到grunt-contrib-watch 这个包
下载这个包
下载完成
再次执行grunt
我们回来看下代码,发现 default 任务没有注册 ,
而我们自定义了live任务:
|
|
你现在可以执行 grunt live 来执行这个任务
你也可以创建一个default任务
如果创建default 这样创建 添加到gruntfile里
|
|
此时你可以 输入命令 grunt 或 grunt watch 来执行这个任务
至此 启动你下载好的chrome livereload那个插件即可。
此时你就可以实时看代码效果,代码保存网页那边就刷新了,妈妈再也不用担心我玩命的按F5啦 ╮(╯▽╰)╭