Grunt 实现浏览器实时刷新

一、实现背景

　　在传统的前端编码模式中，我们一直遵循着三步走的方法：编码 ->  保存 -> 刷新。久而久之就会觉得很繁琐，特别是在进行微调的时候，显得步骤特别的复杂麻烦。这个时候，我们也许就需要一个在我们写完代码保存后能够自动给我们刷新的工具 - livereload。

　　LiveReload会监控你指定的目录中文件，如果有文件被更改，它就自动触发浏览器刷新页面。但如果你修改的是CSS或者图片，页面内容会即时更新，无需重新加载。这样我们不用每次修改文件后，都要去按下F5刷新页面，而是直接就能显示，有点类似所见即所得的编辑模式，特别适合使用双屏coding的人。另外同时结合Sublime text和Emmet LiveStyle，能提高不少开发效率。

 

二、准备工作

1.Node运行环境

2.Grunt

 

三、实现方式（以Chrome 浏览器为例）

 

主要模块：grunt-contrib-watch、connect-liveload、

辅助插件：Chrome LiveReload

 

1.优缺点

　　优点：安装配置简单方便

　　缺点：需要浏览器插件支持，部门浏览器不支持该实现方式

 

2.模块安装

npm install grunt-contrib-watch --save-dev

npm install connect-livereload --save-dev

 

3.项目运行环境

　　配置一个Web服务器（IIS/Apache），LiveReload需要在本地服务器环境下运行（对file:///文件路径支持并不是很好）。

 

4.Gruntfile.js配置

 1 module.exports = function(grunt) {
 2 
 3     require('time-grunt')(grunt);
 4 
 5     grunt.initConfig({
 6         pkg: grunt.file.readJSON("package.json"),
 7         watch: {
 8             foo: {
 9                 files: ['*.html', 'styles/*', 'scripts/*', 'images/**/*'],
10                 options: {
11                     livereload: true
12                 }
13             }
14         }
15     });
16 
17     grunt.loadNpmTasks('grunt-contrib-watch');
18 
19     grunt.registerTask("live", ['watch']);
20 };

 

5.项目运行，输入以下命令

grunt live

 

6.启动LiveReload

　　点击Chrome LiveReload插件的ICON，此时ICON圆圈中心的小圆点变成实心的，说明插件执行成功！

 

 

参考文章：brianchu 个人博客

posted @ 2016-04-12 14:50  MangoNiki  阅读(870)  评论(0)  编辑  收藏  举报