gulp-livereload实战应用

从网上搜索的结果来看,并没有完整的livereload插件的应用方法;通过实践验证,得出livereload完整的用法。

livereload的功能是什么?

它能使你在编辑器里按下保存的那一刻,实时自动刷新页面(当然,有一些夸张,至少我用着有些延时…)

怎么用?

安装

第一步:拥有node环境,全局安装gulp和在当前工作目录下安装gulp、gulp-livereload、http-server;

npm install gulp -gnpm install gulp --save-devnpm install gulp-livereload --save-devnpm install http-server --save-dev

第二步:安装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-serverStarting 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:8080Hit CTRL-C to stop the server

第二步:再开一个node黑窗口,运行gulp;

gulp

开启chrome插件

实心圆是开启;
空心圆是关闭;

通过http://localhost:8080/访问项目,这是node环境提供的http服务;

此时,你会发现当你修改 app 文件夹下的任何文件(包括html),命令行都会有内容输出,说明能够监控到文件的变化,运作正常了;
无耻的链接地址

关键字:gulp

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部