gulp教程之gulp-livereload

Ooo_My_God发表于 分类:构建工具 阅读(12477) 评论(30)

简介:

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

0、有更好的方案,浏览器无需安装插件,且可以同时在PC、平板、手机等设备下进项调试,详细请参考这里,当然多学点知识无害↓↓↓↓↓

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

1.1、gulp基本使用还未掌握?请参看: gulp详细入门教程

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

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什么是cnpm,如何安装?

2.4、说明:--save-dev 保存配置信息至 package.json 的 devDependencies 节点。为什么要保存至package.json?

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浏览器插件即可启动,如下图:

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

6.4、再次声明:有更好的方案,浏览器无需安装插件,且可以同时在PC、平板、手机等设备下进项调试,详细请参考这里

7、结束语

7.1、本文有任何错误,或有任何疑问,欢迎留言说明。

下载附件

如果觉得我的文章对您有用,请随意打赏。您的支持将是我继续创作的动力! ¥ 打赏支持 ¥

本站文章除注明转载外,均为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。

http://www.ydcss.com/archives/702

相关推荐

评论

网友最新评论 (30)

  1. 看看您的博客!

    479064764 06-04 10:03 回复
  2. 您的博客拥有旺盛的生命力!!

    蒂欧娜 07-23 16:56 回复
  3. 非常感谢

    07-29 14:32 回复
  4. 很喜欢你的文章,写的很详细,赞用gulp 的gulp-connect插件,不用下载插件http://www.cnblogs.com/anywing/p/5311061.html

    路小雨 09-07 10:19 回复
  5. 我本地谷歌安装了livereload插件 但是 页面还是不刷新 也启动了 node服务器 这是报错 Could not connect to LiveReload server. Please make sure that LiveReload 2.3 (or later) or another compatible server is running.

    行胜于言 09-19 17:17 回复
  6. 还是browsersync好用啊,还能同步操作。

    雾雨奈绪 09-26 15:51 回复
  7. browsersync 为什么只有sass没有 Less啊~ 请出个教程吧!!!

    黄克松 10-31 16:27 回复
  8. 我用了browsersync,gulp上打开的是localhost:3000的地址,但出错。提示这玩意[BS] Access URLs: ————————————- Local: http://localhost:3000 External: http://10.127.127.1:3000 ————————————- UI: http://localhost:3001 UI External: http://10.127.127.1:3001 ————————————-[BS] Serving files from: ./请问下怎么解决?

    汪浩 11-28 15:41 回复
  9. 文章写的很详细,关键是易懂,希望有更多好文章。

    12-09 13:44 回复
    • 为什么我一步一步操作,都没有自动刷新。url:http://localhost:63342/nodeTest/view/index.html?,也监听到了Css变化,就是不刷新。

      HelloWorld_Wys 01-05 11:16
    • 你好!1. 监听到css变化,页面css也生效了,但是页面没有刷新是么?如果是,修改css是以一种热更新的形式修改css,不会刷新页面的,如需刷新页面,监听css外,还得监听html。2. 监听到css变化了,但是页面样式没生效是么?检测页面引用的css路径是否为生成后的路径。3. 都不是,请发gulpfile.js 相关配置看看。

      YDCSS 01-05 22:17
    • 你好!1. 监听到css变化,页面css也生效了,但是页面没有刷新是么?如果是,修改css是以一种热更新的形式修改css,不会刷新页面的,如需刷新页面,监听css外,还得监听html。2. 监听到css变化了,但是页面样式没生效是么?检测页面引用的css路径是否为生成后的路径。3. 都不是,请发gulpfile.js 相关配置看看。

      YDCSS 01-05 22:17
    • 你好!1. 监听到css变化,页面css也生效了,但是页面没有刷新是么?如果是,修改css是以一种热更新的形式修改css,不会刷新页面的,如需刷新页面,监听css外,还得监听html。2. 监听到css变化了,但是页面样式没生效是么?检测页面引用的css路径是否为生成后的路径。3. 都不是,请发gulpfile.js 相关配置看看。

      YDCSS 01-05 22:17
    • 你好!1. 监听到css变化,页面css也生效了,但是页面没有刷新是么?如果是,修改css是以一种热更新的形式修改css,不会刷新页面的,如需刷新页面,监听css外,还得监听html。2. 监听到css变化了,但是页面样式没生效是么?检测页面引用的css路径是否为生成后的路径。3. 都不是,请发gulpfile.js 相关配置看看。

      YDCSS 01-05 22:17
输入关键字