刷新拜拜～gulp-livereload

标签：

　　早就想要自动自动自动刷新了啊，曾经用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了。。

刷新拜拜～gulp-livereload

标签：

原文地址：http://www.cnblogs.com/johnnydan/p/4667905.html