前端开发利器 livereload -- 从此告别浏览器F5键

各位从事前端开发的童鞋们，大家每天coding && coding，然后F5 && F5，今天推荐一个静态文件在浏览器中自动更新的扩展 livereload，不同手动刷新也能实时预览新代码构建的页面。

软件准备：
1.新版的sublime text（sublime text 2 无法下载livereload插件）
　　下载地址 https://www.sublimetext.com/3
　　新版本安装配置说明 https://www.douban.com/note/474507021/
　　下载livereload插件
2.chrome扩展livereload
　　无法FQ 手动下载 http://www.chromein.com/search_livereload_1.html

本地任意静态html || css || js文件

开始使用：
看图说话~~~~

chrome扩展livereload需要选择文件地址

sublime插件启动 && chrome开启livereload扩展，chrome中插件图标为实心是为启动状态，空心为关闭状态

sublime中文件连接chrome成功标示

效果预览：

大家愉快地开始工作吧！！！

时间： 2024-08-28 08:33:32

前端开发利器 livereload -- 从此告别浏览器F5键的相关文章

前端开发利器 Sublime Text 3 使用技巧和总结笔记

这篇文章是本人在使用该工具进行前端开发的自我总结,思路也许不是很清楚,不过还是希望对读者的你有所帮助,千万别把这边文章收藏起来发霉哦,无论背多少次快捷键,还不及自己多实际操作几次. 目前官方版正式版 Sublime Text 2 Build 2221,而 Sublime Text 3 为测试阶段,建议下载正式版  注册机SublimeTextKeygen下载 打开注册机,先点中间 “Patch key” 打开 “sublime_text.exe” 文件确认,再随意修改下 “Name” 然后 “G

前端开发利器-Brackets IDE

是什么? http://brackets.io/ A modern, open source text editor that understands web design. 现代, 开源的文本编辑器, 最懂得web设计. With focused visual tools and preprocessor support, Brackets is a modern text editor that makes it easy to design in the browser. 专注可视化工具

WEB前端开发人员须知的常见浏览器兼容问题及解决技巧

所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果.所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题.在学习浏览器兼容性之前,我想把前端开发人员划分为两类: 第一类是精确按照设计图开发的前端开发人员,可以说是精确到1px的,他们很容易就会发现设计图的不足,并且在很少的情况下会碰到浏览器的兼容性问题,而这些问题往往都是浏览器的

web前端开发利器——基于ruby的sass，compass和Dreamever+emmet插件

引言:web前端的html页面和css文件有时写起来会很麻烦,但是借助一些工具能够帮助我们轻松的构建相应的页面.sass是css的一款开发工具,有相应的语法,可以有逻辑和简洁编写css代码.本文介绍的主要是基于Dreamever cs5加上emmet插件快速编写简洁html页. 1. ruby安装与配置 ruby可以从百度搜索中的百度软件安装中心找到或者官网下载.安装很简单,以.exe文件进行安装,直接进行下一步安装就行.安装完成之后,在命令行窗口中输入 ruby -v,如果显示了相应的版本说明

微信开发系列——微信订阅号前端开发利器：WeUI

前言:年前的两个星期,学习了下微信公众号的开发.后端基本能够基于盛派的第三方sdk能搞定大部分事宜.剩下的就是前端了,关于手机端的浏览器的兼容性,一直是博主的一块心病,因为博主一直专注于bootstrap的相关组件学习,知道bootstrap做响应式没有任何问题,所以曾经尝试过直接用bootstrap来布局,对于一些简单的栅格布局,bootstrap没有任何问题,可是一旦涉及前端组件这一块的时候,总是找不到合适的移动端组件,什么都要自己去实现,这个开发成本就大了去了.于是乎博主打算另辟蹊径,找找

前端开发利器之静态服务器

在进行前端页面开发时,为了调试方便,需要在本地启动一个静态文件服务器,而不需要与后端api服务一起部署. 常用静态文件服务器 01. anywhere 使用简单,需要nodejs环境.安装:npm install anywhere -g使用:anywhere --help在任何需要访问静态文件的地方,直接运行即可访问:anywhere -p 8080详见:https://www.npmjs.com/package/anywhere 02. http-server 使用简单,需要nodejs环境.

前端开发利器CSS之完美容颜

请先掌握HTML知识!!!!详见:HTML之常用标签整理 四.CSS开始 1.认识CSS样式 使用CSS样式的一个好处是通过定义某个样式,可以让不同网页位置的文字有着统一的字体.字号或者颜色等 2.CSS样式的优势 用<span></span>括起来,统一设置css样式 3.CSS代码语法 css 样式由选择符和声明组成,而声明又由属性和值组成 p{color:blue}(选择符{属性  声明  值}) 选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(

前端开发利器webStorm /phpStorm

合适的工具会事半功倍,当然也得把握分寸,要不就成了会得越多干的越多的“苦力者”.编辑类软件层出不群,各有所长,各有所短.找到一个合适的还真是难.还好有webstorm的出现,最近又是3.0的新版本发布.为什么这么说呢,她与其它的编辑器有什么不同:1. 任何一个编辑器都需要保存(ctrl + s),这是所有win平台上编辑类软件的特点,但是webstorm编辑文件右上角是没有那个熟悉的米号的. 换句话说,所有的操作都直接存储,这样带来的坏处就是,没有以前的米号标识,万一键盘误操作也会被立即存储.

Less入门到上手——前端开发利器

摘录less官网的解释: LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量.继承.运算.函数等,更方便CSS的编写和维护. LESSCSS可以在多种语言.环境中使用,包括浏览器端.桌面客户端.服务端. 以上是less官方解释,说下本菜的理解:less类似css的jquery,一个为css封装的库. less最终还是被编译成css被读取. 1.less定义变量: /*声明变量*/ @var_width:120px; /*使