gulp-livereload实战应用
从网上搜索的结果来看,并没有完整的livereload插件的应用方法;通过实践验证,得出livereload完整的用法。
livereload的功能是什么?
它能使你在编辑器里按下保存的那一刻,实时自动刷新页面(当然,有一些夸张,至少我用着有些延时…)
怎么用?
安装
第一步:拥有node环境,全局安装gulp和在当前工作目录下安装gulp、gulp-livereload、http-server;
npm install gulp -g npm install gulp --save-dev npm install gulp-livereload --save-dev npm install http-server --save-dev
第二步:安装chrome插件,送你飞;
//需要翻墙,可以百度一下liveReload chrome插件,另行安装
第三步:安装livereload客户端,继续飞;
第四步:本人在windows下进行的,其他系统如有问题,概不负责……不负责…….
livereload添加监听文件
点击add添加或者直接拖拽文件夹即可,其它的配置无用,我不管;
gulpfile.js配置
以下是我的配置文件:
var gulp = require('gulp'); var plugins = require('gulp-load-plugins')(); var paths = { styles:['app/scss/**/*.scss'], outSytles:'app/css', images: ['images/**','oa/images/**'] }; gulp.task('scss',function(){ return gulp.src(paths.styles) .pipe(plugins.changed(paths.outSytles)) .pipe(plugins.sourcemaps.init()) .pipe(plugins.sass()) .pipe(plugins.autoprefixer({ browsers: ['>1%'], cascade: false, remove:false })) .pipe(plugins.minifyCss()) .pipe(plugins.sourcemaps.write()) .pipe(gulp.dest(paths.outSytles)) .pipe(plugins.livereload()); }); gulp.task('watch', function() { gulp.watch(['app/**']).on('change', plugins.livereload.changed); gulp.watch(paths.styles, ['scss']); }); gulp.task('default',['watch','scss']);
执行任务
第一步:执行http-server;
http-server
启动后显示:
E:\workplaces\svn\university>http-server Starting up http-server, serving ./ Available on: http://192.168.0.172:8080 http://192.168.120.1:8080 http://192.168.86.1:8080 http://127.0.0.1:8080 Hit CTRL-C to stop the server
第二步:再开一个node黑窗口,运行gulp;
gulp
开启chrome插件
实心圆是开启;
空心圆是关闭;
通过http://localhost:8080/访问项目,这是node环境提供的http服务;
此时,你会发现当你修改 app 文件夹下的任何文件(包括html),命令行都会有内容输出,说明能够监控到文件的变化,运作正常了;
严重推荐
以上是gulp官网讲述的实时刷新的方式,太过于麻烦,不推荐使用,可以选择替代品;
比如:Browsersync
相关推荐
星辰的笔记 2020-07-04
zhongweinan 2020-06-10
jiangfulai 2020-04-18
hlihaihong 2020-01-13
kaosini 2020-01-12
kaosini 2020-01-12
FranksTD 2019-12-19
hlihaihong 2019-12-15
hlihaihong 2019-12-14
我有一只小松鼠 2019-12-14
FranksTD 2019-12-13
SeekerTime 2019-11-17
yuetingzhuying 2015-10-17
福叔 2019-09-06
kaosini 2019-09-06
RainyX 2019-07-01
hlihaihong 2019-07-01
idnochinese 2019-07-01
UndefineOrNull 2019-07-01