1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > livereload使用方法

livereload使用方法

时间:2020-02-24 12:13:29

相关推荐

livereload使用方法

搞这个自动刷新的插件搞了好几个小时了还没搞明白,快被气死了,想改用browser-sync结果npm又一直转啊转一直卡死。

刚才终于神奇地搞定了,结果发现还是我自己智商太低。。。大概的经过是这样的。。。

首先如果你没装node/npm/gulp/livereload就别玩了,这个东西离你还很遥远,你甚至要花一些时间去了解这些东西是什么鬼。

然后你还得下载一个livereload的chrome插件,作为chrome的扩张程序用的,把名字贴上来,“_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']);});

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。
相关阅读
livereload的简单使用

livereload的简单使用

2022-02-21

sublime livereload插件

sublime livereload插件

2022-06-09

Livereload介绍

Livereload介绍

2020-08-01

livereload(自动刷新)

livereload(自动刷新)

2019-09-13