前端页面可视化开发-livestyle,livereload,browser-sync

课程地址:https://www.imooc.com/video/12894

一、livestyle(支持css,sass,less)

浏览器和编辑器的双向修改

浏览器插件1安装

如果之前sublime装过低版本的livestyle,需要先卸载低版本的

安装

安装livestyle

安装成功后,安装http-server

代码语言:javascript
复制
npm install -g http-server

通过httpserver启动页面

代码语言:javascript
复制
http-server

打开插件

这里不用ctrl+s保存,页面也能自动刷新

可以修改css,less,scss文件

google国内被墙了,可以通过国内镜像网站下载

二、livereload(支持css,sass,less,html,js,图片等)

本质是监控文件修改,实时刷新浏览器,需要安装livereload插件和node.js插件,全局刷新

安装本地插件:

代码语言:javascript
复制
npm install -g livereload

如果安装不成功,可以使用如下命令:

代码语言:javascript
复制
sudo npm install -g livereload

在文件加下启动livereload

代码语言:javascript
复制
livereload

ctrl+s保存后实时刷新

结合gulp,实现刷新:

代码语言:javascript
复制
npm init

这样,就创建了一个package.json的文件

这个文件用于标识node.js的包名,版本,依赖等信息

编写gulp脚本:

代码语言:javascript
复制
var gulp = require("gulp");
var livereload = require("gulp-livereload");

gulp.task('watch',function(){
livereload.listen();

gulp.watch('./*.html',function(file){
	console.log(file);
	gulp.src(file.path).pipe(livereload())
})

})

安装gulp

代码语言:javascript
复制
npm install gulp -g
npm install gulp

安装glup-livereload

代码语言:javascript
复制
npm install gulp-livereload --save -dev

--save -dev 这种方式,安装成功后,会在package.json文件中增加一条依赖关系,指向gulp-livereload

执行“watch”脚本

代码语言:javascript
复制
gulp watch

修改文件后,报错

file参数名称修改正确,重启命令

html修改正确

可以参考github上的主页

安装后可能遇到执行错误的解决方法:

Perferences-Package settings-LiveReload-User

代码语言:javascript
复制
{
    "enabled_plugins": [
        "SimpleReloadPlugin",
        "SimpleRefresh"
    ]
}

Perferences-Package settings-LiveReload-Default

代码语言:javascript
复制
{
     "enabled_plugins": []
}

三、Browser-Sync(所有类型文件,支持gulp脚本)

代理服务器监听文件,不需要安装浏览器插件,只需安装node.js插件,局部刷新,可以实现手机浏览器和PC浏览器多个同步,包括视图同步和交互同步

安装node.js和插件:

代码语言:javascript
复制
npm install -g browser-sync

优点:

可以安装在多个环境下

开源

支持一些构建工具

可以模拟一些网络状况

支持交互同步

支持文件同步

通过 UI和文件行对其进行设置

做一些定制化的同步

可以看到URL历史

静态站点的启动:

代码语言:javascript
复制
browser-sync start --server --files “css/*.css”

在前端项目的目录下执行

两个星号代表监控所有文件

交互同步,滚动一个页面,别的页面也会同步滚动

input内容页面修改,也会同步

3031端口为其页面控制站,同步选项主要针对交互

代理服务器的启动——针对动态网站(比如:php,java网站)

本地安装:

把browser-sync安装到node依赖中

代码语言:javascript
复制
npm install browser-sync gulp --save-dev

写脚本:

代码语言:javascript
复制
var gulp = require("gulp");
var livereload = require("gulp-livereload");
var browserSync = require("browser-sync");

gulp.task('watch',function(){
livereload.listen();

gulp.watch('./*.html',function(file){
	console.log(file);
	gulp.src(file.path).pipe(livereload())
})

});

gulp.task('browser-sync',function(){
browserSync.init({
server:{
baseDir:"./"
}
})
})

命令行执行:

代码语言:javascript
复制
gulp browser-sync

以上为在pc调试,也可以用内网地址加上3000端口号,用手机访问,实时监控到页面修改

以手机模拟器演示:

四、总结

下载地址:

1.livestyle:http://livestyle.io

2.livereload : http://livereload.com

3.browser-sync : http://www.browsersync.io

问题解决:

问题:国内google被墙了,怎么安装插件?

一般用V**上网

这里提供一下下载链接,以便没有使用V**的人也能安装成功

livestyle的exe插件下载:https://pan.baidu.com/s/1jJOEc9w

安装之后的样子

使用atom软件,可以用livestyle吗?

atom的下载地址:https://github.com/atom/atom/releases/tag/v1.24.0

打开atom的package install页面

查找安装emmet,时间有点长

如果碰到这个报错,一般是编译用的python没有安装

安装完这个后再安装emmet即可

安装好后就能看到emmet插件

继续安装livestyle插件,需要一点时间

编辑器按钮可以选择css文件

安装好google和sublime上的livestyle插件后,发现有时候运行不灵,浏览器右上方插件球变成黄色状态,怎么办?

情况1:经测试发现,外部字体图标的css引入会引起服务器地址的错误,浏览器中修改样式,发现样式改变在bolb:http中。

解决方法:先把外链css注释掉,或者换成本地文件

情况2:插件默认寻找的是index.html,如果调用页面名字不是这个的话,会出现文件目录

解决方法:将当前需要修改的页面改成index.html

情况3:修改不灵,还可能是css存放的文件夹名字或者层级有关(推测)

解决方法:有.css在当前页面引用的,在右上角小绿球里选择相应的css路径

使用整理说明:

1.livestyle使用命令+谷歌浏览器:

在文件目录下

代码语言:javascript
复制
http-server

2.livereload使用命令+V**代理+谷歌浏览器:

在文件目录下

代码语言:javascript
复制
livereload
gulp watch

3.browser-sync的使用命令,不用V**代理,各浏览器同步内容和交互:

在文件目录下

代码语言:javascript
复制
browser-sync start --server --files “**”

代码语言:javascript
复制
gulp browser-sync

参考文档:

2.atom安装参考:https://www.jianshu.com/p/b4e80ed3a304

3.livestyle初体验参考:https://www.jianshu.com/p/d23ff3cf1d33

4.其他安装问题参考:https://www.zhihu.com/question/36233553