web自动化工具-livereload

livereload是一个很神奇的工具,主要解放了F5键,监听文件变动,整个页面自动刷新。
可搭载gulp等构建工具使用。和liveStyle 针对样式文件相比,可监听任何文件。

livereload文档

安装插件

  • 打开Chrome网上应用商店,安装插件livereload.
  • 打开终端控制台
    1
    sudo npm install -g livereload

使用

  • 路径切到项目目录,启动服务(这里依然使用http-server启动)。

    1
    2
    3
    4
    5
    http-server
    Starting up http-server, serving ./
    Available on:
    http://127.0.0.1:8080
    http://192.168.1.5:8080
  • 路径切到项目目录,启动livereload。(切到项目目录,是为了只监听本项目文件,防止监听文件过多,造成机器卡顿)

    1
    2
    livereload
    Starting LiveReload v0.6.0 for /Users/xudongsheng/Documents/project/web-auto-tool/livereload on port 35729.
  • 启动Chrome浏览器,打开服务文件,启动 livereload插件,插件中心的空心圈圈会变成实心圆圈。
    打开控制台,开启插件的时候,细心的同学可能会发现dom中多了一行:

    1
    2
    <script src="http://127.0.0.1:35729/livereload.js?ext=Chrome&amp;extver=2.1.0"></script>
    //注意端口号:35729,想具体了解原理的,自行查找资料即可。

至此,相信你就可以愉快的体验 自动刷新功能了,赶快试试吧。

高级使用

当然,具体到项目都是搭载脚本使用的,这些教程应该有很多,推荐参考官方教程使用。

web自动化工具-livereload的更多相关文章

  1. web自动化工具-开篇

    web自动化工具-开篇 最近几年,前端技术风一样的速度迭代更新,各种框架工具雨后春笋般涌现,作为一个平凡的开发者,也只能在洪流中沉沉浮浮,微不足道,以前前端叫做切图仔.美工,如今改了称号叫前端工程师, ...

  2. web自动化工具-Browsersync

    web自动化工具-Browsersync browser-sync才是神器中的神器,和livereload一样支持监听所有文件.可是和livereload简单粗暴的F5刷新相比,browsersync ...

  3. web自动化工具-liveStyle

    web自动化工具-liveStyle LiveStyle. The first bi-directional real-time edit tool for CSS, LESS and SCSS主要用 ...

  4. Web自动化工具对比

    首先说一下我对Web自动化测试与CS自动化测试的认识.从宏观对比都是通过脚本自动化完成功能的验证,区别不大.Web测试更为显著的浏览器兼容性.安全,以及与Web技术相关的表单测试.链接测试等,其实都是 ...

  5. puppeteer(一)环境搭建——新Web自动化工具(同selenium)

    一.简介 https://github.com/GoogleChrome/puppeteer Puppeteer是一个Node库,它提供了一个高级API来控制DevTools协议上的 Chrome或C ...

  6. puppeteer(二)操作实例——新Web自动化工具更轻巧更简单

    一.入门实例 了解puppeteer见上一篇文章: https://www.cnblogs.com/baihuitestsoftware/p/9957343.html 1)本例主要是启动浏览器 con ...

  7. 自动化工具selenium

    selenium web 自动化工具 selenium 不仅仅可以做web自动化,还可以考虑用于爬虫 java.python..net都可使用,具体使用方法google 构建Python+Seleni ...

  8. 爬虫实战:爬虫之 web 自动化终极杀手 ( 上)

    欢迎大家前往腾讯云技术社区,获取更多腾讯海量技术实践干货哦~ 作者:陈象 导语: 最近写了好几个简单的爬虫,踩了好几个深坑,在这里总结一下,给大家在编写爬虫时候能给点思路.本次爬虫内容有:静态页面的爬 ...

  9. Firefox上Web开发工具库一览

    Firefox的目标之一就是尽可能地使web开发者的生活更简单高效,并通过提供工具和具有很强扩展性的浏览器使人们创造出神奇的东西.使web开发者使用Firefox的时候,浏览器可以提供大量开发工具和选 ...

随机推荐

  1. Java中接口和抽象类的区别

    经常看到这样的问题,就是问这两个的区别,我这也总结一下: 1,宏观上说,一个是类,一个是接口,类只支持单一继承,接口支持多个继承 2,微观上说,就是从内部来说 a,成员变量方面 接口可以包含方法,属性 ...

  2. [LeetCode] Arithmetic Slices II - Subsequence 算数切片之二 - 子序列

    A sequence of numbers is called arithmetic if it consists of at least three elements and if the diff ...

  3. jetbrain系列IDE设置

    1.代码提示默认ctrl+space(这是全角半角切换),改为alt+/,这与cyclic expand word冲突,直接删掉它就可以了 2.ctrl+M,进入presentation mode,与 ...

  4. python命名空间

    在"python之禅"那几句话中有一句:namespace is a good thing. python对于命名空间的处理非常简单,下面的内容不一定真实,完全是我根据现象推测出来 ...

  5. 【C#】菜单功能,将剪贴板JSON内容或者xml内容直接粘贴为类

    VS 2015菜单功能,将剪贴板JSON内容或者xml内容直接粘贴为类

  6. Bootstap datetimepicker报错TypeError: intermediate value

    Bootstrap datetimepicker有多个版本,官方的链接中,只是datepicker,没有时间的选择,原版的datetimepicker也不再更新,不能用新版的jquery.现在http ...

  7. IOS比较常用的第三方组件及应用源代码(持续更新中)

    把平时看到或项目用到的一些插件进行整理,文章后面分享一些不错的实例,若你有其它的插件欢迎分享,不断的进行更新~ 一:第三方插件 1:基于响应式编程思想的oc 地址:https://github.com ...

  8. Docker对于部署来说及其重要

    目前的IT环境发生了很大的变化,有big server到vm server到docker,一步步的敏捷快速,更加合理的利用硬件资源,分离不同环境带来的问题,简化部署. 2016过年的这几天就自学了一下 ...

  9. Python文本处理nltk基础

    自然语言处理 -->计算机数据 ,计算机可以处理vector,matrix 向量矩阵. NLTK 自然语言处理库,自带语料,词性分析,分类,分词等功能. 简单版的wrapper,比如textbl ...

  10. django 补充篇

    from验证 django中的Form一般有两种功能: 输入html-----------不能你自己写一些标签,而帮你自动生成 验证用户输入-------将用户验证信息保存起来,可以传到前端 # !/ ...