标签：
搞这个自动刷新的插件搞了好几个小时了还没搞明白，快被气死了，想改用browser-sync结果npm又一直转啊转一直卡死。
刚才终于神奇地搞定了，结果发现还是我自己智商太低。。。大概的经过是这样的。。。
首先如果你没装node/npm/gulp/livereload就别玩了，这个东西离你还很遥远，你甚至要花一些时间去了解这些东西是什么鬼。
然后你还得下载一个livereload的chrome插件，作为chrome的扩张程序用的，把名字贴上来，“chromein.com_ext_11631.crx”，百度就能下载，csdn，不要积分就能下，很方便。下好以后装上就好了（别告诉我你不会安装chrome的扩展程序，鼠标拖一下的事情。。）
然后在你的gulpfile.js里写一些代码，我先把github上的demo给贴上来
var gulp = require(‘gulp‘), less = require(‘gulp-less‘), livereload = require(‘gulp-livereload‘); gulp.task(‘less‘, function() { gulp.src(‘less/*.less‘) .pipe(less()) .pipe(gulp.dest(‘css‘)) .pipe(livereload()); }); gulp.task(‘watch‘, function() { livereload.listen(); gulp.watch(‘less/*.less‘, [‘less‘]); });
从最后一个watch的task开始看，一旦我们修改了less下的less文件，系统就会执行less这个task，less这个task做的事情就是，把less下所有的less文件编译成css文件然后放到css文件夹下面，最后再做一次重载，这样一看一目了然。
我再把我的demo贴上来，我的demo跟less无关，只要你修改了css文件就直接重载，这特么才叫demo，以后demo就照这个格式写！！！
var gulp = require(‘gulp‘); var livereload = require(‘gulp-livereload‘); gulp.task(‘css‘, function(){ gulp.src(‘css/*.css‘) .pipe(livereload()); }); gulp.task(‘watch‘, function() { livereload.listen(); gulp.watch(‘css/*.css‘, [‘css‘]); });
然后就是启动任务咯！
在cmd里gulp <your task name>，我们这里是watch，所以就是gulp watch
用服务器的地址打开网页！！！
用服务器的地址打开网页！！！
用服务器的地址打开网页！！！
重要的事情说三遍！！！
点击livereload-chrome插件的图标，就在地址栏右侧，你不点的时候它里面是空心的，点了一下它就高潮了里面就变成黑色实心的了，like this：
然后当你改动css文件后ctrl+s后，页面就会自动刷新啦！
不过据说browser-sync可以连着移动端一块儿刷新，PC上所有的浏览器都能刷新，而且滚动点击什么的都是同时产生作用，比livereload强大很多。
so 明天看下npm的人品，要是人品好，也就没livereload啥事儿了！
var gulp = require(‘gulp‘); var sass = require(‘gulp-ruby-sass‘); var autoprefixer = require(‘gulp-autoprefixer‘); var minifycss = require(‘gulp-minify-css‘); var jshint = require(‘gulp-jshint‘); var uglify = require(‘gulp-uglify‘); var imagemin = require(‘gulp-imagemin‘); var rename = require(‘gulp-rename‘); var concat = require(‘gulp-concat‘); var notify = require(‘gulp-notify‘); var cache = require(‘gulp-cache‘); var livereload = require(‘gulp-livereload‘); var del = require(‘del‘); var less = require(‘gulp-less‘) gulp.task(‘default‘, function() { //default task code }); gulp.task(‘minify-css‘, function(){ return gulp.src(‘./css/*.css‘) .pipe(rename({suffix: ‘.min‘})) .pipe(minifycss()) .pipe(gulp.dest(‘./css/min‘)) .pipe(notify({message: ‘minify-css task complete‘})); }); gulp.task(‘less‘, function() { gulp.src(‘less/*.less‘) .pipe(less()) .pipe(gulp.dest(‘css‘)) .pipe(livereload()); }); gulp.task(‘styles‘, function(){ gulp.src(‘css/*.css‘) .pipe(livereload()); }); gulp.task(‘scripts‘, function(){ gulp.src(‘js/*.js‘) .pipe(livereload()); }); gulp.task(‘watch‘, function() { livereload.listen(); gulp.watch(‘less/*.less‘, [‘less‘]); gulp.watch(‘css/*.css‘, [‘styles‘]); gulp.watch(‘js/*.js‘, [‘scripts‘]); });
标签：
原文地址：http://www.cnblogs.com/zcynine/p/5559794.html
