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

声明：本文不涉及Grunt。

开发环境：windows7

编辑器：sublime text3

浏览器：firefox31

介绍

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

前端自动化一类的工具就是为了把双手从这些反复的，无意义的操作中拯救出来。现在网上的方案很多，我在这里介绍的LiveReload就是一款这样的工具，它可以监听你设置的文件夹中文件的改变，若是文件内容有改变，它会自动刷新浏览器。   LiveReload

安装：

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

首先打开官网：   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吧！

如果有双屏的话，调试起来肯定爽歪歪。

前端自动化神器LiveReload配合浏览器和less/sass使用方法的更多相关文章

  1. 前端自动化神器gulp使用记录

    1.安装压缩图片插件的时候,由于网络原因,死活安装不成功.由于imagemin本身就包含很多插件,安装的时候卡住了,很是郁闷.如果要压缩png图片,那就单独安装imagemin-pngquant压缩插 ...

  2. （转）Bootstrap 之 Metronic 模板的学习之路 - （7）GULP 前端自动化工具

    https://segmentfault.com/a/1190000006738327 初步了解 Metronic 的结构和应用后,我们就可以在项目中应用起来了.考虑到实际项目应用时,会有很多文件需要 ...

  3. 前端自动化部署之gulp

    1.首先需要安装node+npm(这里不再叙述,网上教程一大堆) 2.gulp全局安装:npm install -g gulp 3.cd进入到你的项目目录,这里使用demo文件夹为我的示例项目 4.在 ...

  4. Grunt安装配置教程:前端自动化工作流

    Grunt这货是啥? Grunt 是一个基于任务的 JavaScript 项目命令行构建工具. 最近很火的前端自动化小工具,基于任务的命令行构建工具 http://gruntjs.com Grunt能 ...

  5. Node.js前端自动化工具：gulp

    前端自动化工具 -- gulp 使用简介 gulp是基于流的前端自动化构建工具. 之前也谈到了 grunt的用法,grunt其实就是配置+配置的形式. 而gulp呢,是基于stream流的形式,也就是 ...

  6. 前端自动化工具 -- Gulp 使用简介

    gulp是基于流的前端自动化构建工具. 之前也谈到了 grunt的用法,grunt其实就是配置+配置的形式. 而gulp呢,是基于stream流的形式,也就是前一个函数(工厂)制造出结果,提供后者使用 ...

  7. 前端自动化构建工具——gulp

    gulp是基于流的前端自动化构建工具. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到 ...

  8. Gulp构建前端自动化工作流之：常用插件介绍及使用

    在对Gulp有了一个初步的了解之后,我们开始构建一个较为完整的Gulp开发环境. 本文主要分为6个段落: 1. 构建项目目录结构(Directory Structure Build) 2. 插件介绍及 ...

  9. Ext JS学习第十六天 事件机制event（一） DotNet进阶系列(持续更新) 第一节：.Net版基于WebSocket的聊天室样例 第十五节：深入理解async和await的作用及各种适用场景和用法 第十五节：深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G

    code&monkey   Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...

随机推荐

  1. Vim tips

    1.光标移动: (1).NG -> 移动到第N行,或者使用:N (2).gg -> 移动到第一行 (3).G -> 移动到最后一行 (4).单词移动: w -> 移动到下一个单 ...

  2. iscroll.js的使用

    入门 Scroll是一个类,每个需要使用滚动功能的区域均要进行初始化.每个页面上的iScroll实例数目在设备的CPU和内存能承受的范围内是没有限制的. 尽可能保持DOM结构的简洁.iScroll使用 ...

  3. Codeforces Round 261 Div.2 E Pashmak and Graph --DAG上的DP

    题意:n个点,m条边,每条边有一个权值,找一条边数最多的边权严格递增的路径,输出路径长度. 解法:先将边权从小到大排序,然后从大到小遍历,dp[u]表示从u出发能够构成的严格递增路径的最大长度. dp ...

  4. UVALive 6093 Emergency Room --优先队列实现的模拟

    题意:给n个医生,这些医生有一个上班时间,然后给一些病人,病人有一个到达的时间,以及一些诊断,诊断有property(优先级)和duration(诊断时间)这两个属性,每个病人可能要诊断多次,最后问每 ...

  5. UVALive 6257 Chemist's vows --一道题的三种解法（模拟，DFS，DP）

    题意:给一个元素周期表的元素符号(114种),再给一个串,问这个串能否有这些元素符号组成(全为小写). 解法1:动态规划 定义:dp[i]表示到 i 这个字符为止,能否有元素周期表里的符号构成. 则有 ...

  6. JMeter中返回Json数据的处理方法

    Json 作为一种数据交换格式在网络开发,特别是 Ajax 与 Restful 架构中应用的越来越广泛.而 Apache 的 JMeter 也是较受欢迎的压力测试工具之一,但是它本身没有提供对于 Js ...

  7. （转）轻量级JS焦点图/轮换图myFocus V2源码下载及安装教程

    myFocus是一个专注于焦点图/轮换图制作的JS库,它小巧而且是完全独立的JS库,用它可以轻松的制作出网上绝大部分常见的焦点图(甚至包括flash焦点图),而且制作出的焦点图体积也非常的小(1KB左 ...

  8. 认识实验室信息管理系统（LIMS）

    在当今互联网如日中天的大环境下,各种伴随着互联网的产物如p2p,o2o在如火如荼的进行着,吸引了大量的开发人员都涌向了这个行业,所有的技术似乎都在围绕着互联网发展,传统行业软件开发的人气和关注度就相形 ...

  9. msg url

  10. “PMS-基础权限管理系统”实施某谱OA系统经验总结

    “PMS-基础权限管理系统”介绍 "PMS-基础权限管理系统"是我一直想做的一个产品,融合多年开发及维护管理系统的经验,参考了很多系统,精心研制而成. 可以做为毕业设计参考,新手学 ...