gulp教程之gulp-livereload

2016年11月06日 javascript, 前端技术 暂无评论 阅读 70 views 次

gulp教程之gulp-livereload

gulp-livereload拯救F5!当监听文件发生变化时,浏览器自动刷新页面。【事实上也不全是完全刷新,例如修改css的时候,不是整个页面刷新,而是将修改的样式植入浏览器,非常方便。】特别是引用外部资源时,刷新整个页面真是费时费力。

0、有更好的方案,浏览器无需安装插件,且可以同时在PC、平板、手机等设备下进项调试。

1、安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile.js文件

1.1、gulp基本使用还未掌握?

1.2、本示例目录结构如下:

 gulp111-livereload-1

2、本地安装gulp-livereload(为了演示,安装了gulp-less)

2.1、github:https://github.com/vohof/gulp-livereload

2.2、安装:命令提示符执行 cnpm install gulp-livereload --save-dev

2.3、注意:没有安装cnpm请使用 npm install gulp-livereload --save-dev

2.4、说明:--save-dev 保存配置信息至 package.json 的 devDependencies 节点

gulp-livereload-2

3、配置gulpfile.js

3.1、基本使用(当less发生变化的时候,自动更新页面)

4、谷歌浏览器或火狐安装livereload插件

4.1、说明:谷歌浏览器安装插件需要翻墙,我已经下载了最新版本2.1.0到本地,(谷歌为.crx文件,火狐为.xpi文件)

4.2、安装方法:谷歌浏览器安装crx插件方法、火狐浏览器直接将xpi文件拖进浏览器即可安装

5、执行监听任务

5.1、命令提示符执行:gulp watch

6、打开页面并启动livereload浏览器插件

6.1、以服务器的方式打开页面,例如http://localhost:4444,而不是file:///F:/phpStudy/project/src/index.html,否则无法启动livereload浏览器插件

6.2、点击livereload浏览器插件即可启动,如下图:

gulp-livereload-3

6.3、简单几步就可以很嗨的写代码了

给我留言

您必须 登录 才能发表留言!

Copyright © 大一网 保留所有权利.  

用户登录

分享到: