Livereload介绍 |
您所在的位置:网站首页 › livereload插件 › Livereload介绍 |
Livereload可理解为即时刷新,在前端开发中,开发者在编写或调试html/js/css代码后需要从编辑器切换到浏览器,再刷新浏览器才能看到页面变化,这种十分频繁的操作在一定程度上影响了工作效率,而Liverelod可以帮助我们ad解决了这个问题。 实现livereload有多种方式,可以借助Livereload软件加浏览器插件实现,也可以借助nodejs,通过gulp或者grunt这些task runner实现,但其基本原理都是一样的,即通过在本地开启一个websocket服务,检测文件变化,当文件被修改后触发livereload任务,推送消息给浏览器刷新页面。 在众多的实现方法中,相比nodejs代码实现,使用其他软件或浏览器插件显然没有必要,这里介绍gulp的实现方式,个人认为是比较简单快捷的方式。 gulpjs 实现 livereload首先需要安装nodejs, 再安装 gulp, gulp-connect 模块 $ sudo npm install -g gulp //全局安装gulp模块切换到项目根目录下 $ mkdir ~/gulptest && cd ~/gulptest $ npm init $ npm install --save-dev gulp gulp-connect $ touch gulpfile.js在项目根目录下需要有gulpfile.js这个文件 var gulp = require('gulp'), connect = require('gulp-connect');gulp.task('connect', function() { connect.server({ root: 'app', livereload: true });});gulp.task('html', function () { gulp.src('./app/*.html') .pipe(connect.reload());});gulp.task('watch', function () { gulp.watch(['./app/*.html'], ['html']);});gulp.task('default', ['connect', 'watch']);建立gulpfile.js文件后在根目录下运行命令: $ gulp即可看到本地启动了web server和livereload server,现在打开http://localhost:8080 编辑html文件保存后就可以看到浏览器自动刷新。 使用yoeman generator生成已经整合livereload功能的项目脚手架安装yeoman和相应的generator(generator-gulpx) $ sudo npm install -g yo generator-gulpx新建项目 $ mkdir ~/yogulpx/ && cd ~/yogulpx $ sudo yo gulpx $ gulp可以看到借助yeoman generator可以很方便的构建项目,推荐使用 推荐观看:gulp入门 (一个15分钟的介绍视频) |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |