早就想要自动自动自动刷新了啊,曾经用grunt实现过,但是是yeoman建好的。。其中很多任务我是用不到的啊,为了干净还是得要自己写啊哈哈(现在我只想要自动刷新)。

  首先node是必须的了~就不说怎么装了。

  然后先建好文件夹,安装gulp和gulp-livereload,执行:

 cnpm install gulp gulp-livereload

  以上用了淘宝镜像,也可以用npm安装,只是个demo,没有package.json,然后创建gulpfile.js,如下:

var gulp = require('gulp'),
livereload = require('gulp-livereload'); gulp.task('watch', function() {
livereload.listen();
gulp.watch('app/**/*.*',function(file){
livereload.changed(file.path);
});
});

  大概意思是监听app文件夹里所有文件,如果有变化就发送给livereload服务器。gulp-livereload原话如下:

livereload.changed(path)

Alternatively, you can call this function to send changes to the livereload server. You should provide either a simple string or an object, if an object is given it expects the object to have a path property.

  再你还要建个app文件夹,然后在里面写个demo.html试试。随便写点~稍后有奇效。然后执行:

gulp watch

  在浏览器上访问localhost:35729(这东西默认的端口),会看到:

{
  "tinylr": "Welcome",
  "version": "0.1.6"
}

  但其实并没什么x用哈哈哈~~不管怎么折腾路径还会告诉你no such route啊!

{
  "error": "not_found",
  "reason": "no such route"
}

  是!因!为!。。看github的grunt问答环节原话:

The livereload in this task only handles livereloading. It doesn't provide a static file server. You would use grunt-contrib-connect or some other method to serve files (express, restify, jaws, apache, nginx, etc).

The chrome live reload extension will create a connection through a socket to the livereload server this watch task has started on 35729. When the watch task is triggered it informs the livereload server which then through the socket will inform the chrome extension and reload the necessary portions of the page.

I agree though we need better docs explaining this as you're not the first person to get tripped up by this.

  歌词大意是:在这个任务中livereload只处理livereloading,它不提供静态文件服务器。。。提问链接

  所以还需要装个http-server,我应该早点说的。。欧~我好坏喔,这里我全局装啦,像这样:

cnpm install http-server -g

  用npm是可以的。。只要不嫌慢。

  还需要个chrome插件:livereload,这个是真慢。。

  然后关掉之前的gulp watch吧,可以先进到app目录下,其实在项目根目录也是可以de~,执行:

http-server

  然后在项目根目录下继续:

gulp watch

  http-server默认端口是8080,所以可以通过访问localhost:8080找到你要的自动刷新的那个demo文件。再确保已经安装了liveReload插件~点开它,像这样(右边那个刷新里有实心圈):

  然后你就可以尽情的保存保存了~会刷新。。尊的不用F5 || cmd R了。。

  附上DEMO:github地址

刷新拜拜~gulp-livereload的更多相关文章

  1. 浏览器自动刷新——基于Nodejs的Gulp LiveReload与VisualStudio完美结合。

    本文版权桂博客园和作者吴双共同所有,转载和爬虫请注明原文地址 http://www.cnblogs.com/tdws/p/6016055.html 写在前面 大家好我是博客园的蜗牛,博客园的蜗牛就是我 ...

  2. 前端神器!!gulp livereload实现浏览器自动刷新

    首先gulp是基于Node的,所以确保你已经安装 node.js,在Nodejs官方网站下载跟自己操作系统相对应的安装包. 先说一下gulp安装流程: 1:全局安装gulp,操作为: npm inst ...

  3. gulp LiveReload middleware

    用yo搭建的angular项目,用gulp自动化构建. 自动化构建主要的功能大致有: 1. 文件压缩 2. 文件重命名 3. 文件合并 4. css,js文件自动引入到html 5. 自动刷新 ... ...

  4. Gulp livereload

    平时使用yeoman作为前端部署工具,感觉到yeoman构建工具虽然方便,但是速度和大小总是不尽人意. 最近看到了gulp http://gulpjs.com/ 比较感兴趣随动手一试 gulp的安装以 ...

  5. [工具]web开发时自动刷新网页:liveReload

    传统网页开发流程:用sublime text写好代码,运行,发现问题,再回到sublime text修改,运行…如此往复,十分繁琐.今天看到有人(<LiveReload>讓Sublime ...

  6. gulp配置(编译压缩转码自动刷新注释全)

    参考自:http://www.sheyilin.com/2016/02/gulp_introduce/ 在原先基础上增加了less编译 es6转码资源地图等,修改了一部分的热刷新. gulpfile. ...

  7. Gulp真实项目用例

    包括了less预编译,css压缩,html文件include引入,js混淆压缩,本地开发热刷新服务器,html压缩,版本号添加 github地址: gulpfile.js var gulp = req ...

  8. 利用gulp搭建本地服务器,并能模拟ajax

    工作中可能会用到的小工具,在此记录一下.可以实现的功能有: 本地http服务器 页面实时刷新 可以模拟ajax请求 第一步,新建package.json文件.用到了gulp.gulp-webserve ...

  9. gulp入门学习实例

    好久都没有更新博客了,每天繁忙的工作,下班之后都不想开设备了.前段时间有幸学习了一下gulp这款构建工具,现在和大家分享一下. 为什么使用Gulp Gulp基于Node.js的前端构建工具,通过Gul ...

随机推荐

  1. CSS布局(上)

    CSS布局(上) *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !import ...

  2. Oracle闪回技术(Flashback)

    闪回技术有闪回表.闪回删除.闪回查询.闪回事务查询.闪回事务.闪回数据库.闪回数据归档.其中,闪回查询.闪回事务查询用来“观察”过去:闪回数据归档并不是一个独立的功能,其功能是扩展闪回查询的时间窗口: ...

  3. Java多线程系列--“基础篇”06之 线程让步

    概要 本章,会对Thread中的线程让步方法yield()进行介绍.涉及到的内容包括:1. yield()介绍2. yield()示例3. yield() 与 wait()的比较 转载请注明出处:ht ...

  4. MongoDB的学习--索引类型和属性

    索引类型 MongDB的索引分为以下几种类型:单键索引.复合索引.多键索引.地理空间索引.全文本索引和哈希索引 单键索引(Single Field Indexes) 在一个键上创建的索引就是单键索引, ...

  5. try,catch,throw-----C++

    1.try,catch,throw: try包含你要防护的代码 ,称为防护块. 防护块如果出现异常,会自动生成异常对象并抛出. catch捕捉特定的异常,并在其中进行适当处理. throw可以直接抛出 ...

  6. go环境import cycle not allowed问题处理

    1.前言 今天在搭建Go语言环境,从https://golang.org/dl/上下载一个Go语言环境.环境变量配置刚开始如下配置: GOROOT=/home/go/bin     go执行文件目录 ...

  7. 基于HT for Web 3D技术快速搭建设备面板

    以真实设备为模型,搭建出设备面板,并实时获取设备运行参数,显示在设备面板上,这相比于纯数值的设备监控系统显得更加生动直观.今天我们就在HT for Web的3D技术上完成设备面板的搭建. 我们今天模拟 ...

  8. easyui-datagrid自动合并行

    1.目标 1.1表格初始化完成后,已经自动合并好需要合并的行: 1.2当点击字段排序后,重新进行合并: 2.实现 2.1 引入插件 /** * author ____′↘夏悸 * create dat ...

  9. C#的变迁史 - C# 1.0篇

    C#与.NET平台诞生已有10数年了,在每次重大的版本升级中,微软都为这门年轻的语言添加了许多实用的特性,下面我们就来看看每个版本都有些什么.老实说,分清这些并没什么太大的实际意义,但是很多老资格的. ...

  10. iis7 压缩js文件和启用gzip压缩

    压缩js文件 打开IIS 7的配置文件:c:\windows\system32\inetsrv\config\applicationhost.config 在<staticContent loc ...