前端自动化神器LiveReload配合浏览器和less/sass使用方法

时间 2019-11-14

标签前端自动化神器 livereload 配合浏览器 sass 使用方法栏目测试自动化繁體版

原文原文链接

前言：搜了半天，各类推荐，什么十大工具啦、优秀工具集合啦之类的咸淡文章，就是没有一个讲怎么弄的。配合官网的article本身研究了半天总算配置好了。顺便吐槽下官网关于sass/less设置这块说的模糊不清的。写个教程给你们，相信会对新手们有帮助的。css

声明：本文不涉及Grunt。html

开发环境：windows7前端

编辑器：sublime text3chrome

浏览器：firefox31windows

介绍

通常前端写页面，修改了html or css要想看效果一般就得 Alt+Tab，切换到浏览器，而后F5刷新，时间久了….浏览器

前端自动化一类的工具就是为了把双手从这些反复的，无心义的操做中拯救出来。如今网上的方案不少，我在这里介绍的LiveReload就是一款这样的工具，它能够监听你设置的文件夹中文件的改变，如果文件内容有改变，它会自动刷新浏览器。 LiveReload sass

安装：

首先咱们须要在本地安装一个LiveReLoad的软件，浏览器也须要安装一个liveReLoad的插件。less

首先打开官网： http://feedback.livereload.com/编辑器

在首页的中部有教程文章，工具

点开第一个，开始安装之旅

在win平台：

点击Download an alpha version，

下载下来的是一个400+KB的在线安装程序，点击后他会自动在线下载安装LiveReload，安装完成后的软件长这个样子，点击add图标，能够添加环境文件夹

接下来是浏览器的设置，我已firefox31为例，其余浏览器略有不一样，具体请去官网查看相关文章。

要实现浏览器的LiveReload的话，有两种方式，一种是，当你添加了一个环境文件夹时候

点击integration，到达如上的界面。方式1是能够设置在线刷新，此处咱们不讲，咱们看方式2。

方式2能够设置本地刷新，方式2有两种方式，

第一种：添加文件夹后，它会生成一段如上图所示的js代码，这段代码的内容是咱们添加的环境文件夹的路径。把这段代码拷贝到html文件的<head></head>里就能够了。

或者

第二种：咱们为firefox安装一个LiveReLoad的扩展插件。地址：http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions-

点击红框处为firefox安装插件。从上文咱们也能够看出，safari是不支持本地的fire//:地址的，chrome则须要开启相关功能。而firefox则原生支持。

重启firefox后，插件安装完成

切记！firefox的Mozilla商店中的LiveReload插件版本很老已经不可再用，须要在官网下载的插件才行。

这样软件配置就完成了，接下来咱们试试好很差用。

测试：

首先说明一下，LiveReload是支持编译sass/less的，因此咱们能够直接编辑sass/less也是能够的。

添加完文件夹后，依次点击文件夹—action+files

咱们也可看出开LiveReload的编译功能是很强大的！

对于less，勾选foo/**/*.sass 后缀名是都是.sass，不用管，看到上面的compile less ，其实勾选这个是编译less，虽然写的是后缀名是.sass。

它编译less默认生成的是名字为styles.css的css文件，与less文件在同一级目录

测试代码以下：

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cmn-Hans-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css" />
</head>
<body>
    <div class="test">我是clsss:test所在的DIV
        我是修改后的
        再试一遍
    </div>
</body>
</html>

less:

@width:300px;
@height:200px;
.test{
    width:@width;
    height:@height;
    background-color: #ttt;
}

最后测试效果，上两个GIF图:

解放你的F5吧！

若是有双屏的话，调试起来确定爽歪歪。