livereload使用方法

Posted 2020-07-20 zcynine

搞这个自动刷新的插件搞了好几个小时了还没搞明白，快被气死了，想改用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\']);
});