livereload使用方法

搞這個自動刷新的插件搞了好幾個小時了還沒搞明白，快被氣死了，想改用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('./example/css/*.css')
        .pipe(rename({suffix: '.min'}))
        .pipe(minifycss())
        .pipe(gulp.dest('./dist'))
        .pipe(notify({message: 'minify-css task complete'}));
});

gulp.task('auto-less', function() {
    gulp.src('example/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('example/css'))
        .pipe(livereload());
});

gulp.task('auto-styles', function(){
    gulp.src('example/css/*.css')
        .pipe(livereload());
});

gulp.task('auto-scripts', function(){
    gulp.src('example/js/*.js')
        .pipe(livereload());
});

gulp.task('auto-html', function(){
    gulp.src('example/*.html')
        .pipe(livereload());
});

gulp.task('watch', function() {
    livereload.listen();
    gulp.watch('example/less/*.less', ['auto-less']);
    gulp.watch('example/css/*.css', ['auto-styles']);
    gulp.watch('example/js/*.js', ['auto-scripts']);
    gulp.watch('example/*.html', ['auto-html']);
});