Sublime Text3安装liveReload

一. livereload

livereload是一个web开发辅助工具,当我们修改完html、css和js的时候会自动刷新浏览器,不需要再F5了。这样在双屏切图、写js代码的时候会提高很多效率;
livereload是基于html5的websocket实现的;
livereload在访问的web页面中插入一段socket套接字代码(javascript语言编写),这段代码与livereload服务器端socket建立链接;并等待与执行类似“reload css/styles.css”的指令。

二. Sublime Text 3

一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插件扩展机制,用她来写代码,绝对是一种享受。相比于难于上手的Vim,浮肿沉重的Eclipse,VS,即便体积轻巧迅速启动的Editplus、Notepad++,在SublimeText面前大略显失色,无疑这款性感无比的编辑器是Coding和Writing最佳的选择,没有之一。

三. 安装步骤:

a. liveReload安装步骤:

在谷歌应用商店,搜索liveReload,然后下载安装。

b. 下载SublimeText3

1. 官方下载地址:http://www.sublimetext.com/3

2. Sublime Text 3 免费使用方法

以下经测v3126可用

—–BEGINLICENSE 

—–Ryan ClarkSingleUserLicenseEA7E-8124792158A7DE B690A7A38EC04710006A5EEB34E77CA39C82C81F0DB6371B79704E6F93F36655 B031503A03257CCC01B20F60D304FA8D B1B4F0AF8A76C7BA0FA94D5556D46BCE5237A341 CD837F304D60772D349B1179 A996F82690CDB73C24D41245FD032C30 AD5E72414EAA66ED167D91FB55896B16 EA125C81 F550AF6B A6820916——ENDLICENSE ——

3. 汉化软件

下载:代码编辑器Sublime Text 3 免费使用方法与简体中文汉化包下载

使用方法

1)、将上面要求下载的sublime_text_3.zip  文件解压,得到的Default.sublime-package 文件。打开sublime text 3,打开菜单->preferences->Browse Packages,进入到文件管理器:

Sublime Text3安装liveReload_第1张图片
Sublime Text3安装liveReload_第2张图片

2)、返回上一层到sublime text 3 文件夹,打开“Installed Packages”文件夹。粘贴汉化包文件“Default.sublime-package”到“Installed Packages”文件夹下面,无需刷新即可看到效果。

Sublime Text3安装liveReload_第3张图片

4.安装必备的包管理:Package Control,用来以后安装插件用的。

Package Control 主文件下载

下载地址:https://github.com/wbond/sublime_package_control


Sublime Text3安装liveReload_第4张图片

直接下载按 zip 包。解压之后,把文件夹名称修改为“Package Control”。

1)、点击菜单->首选项->浏览程序包,打开一个文件夹,复制刚才的“Package Control”文件到该目录下面。

Sublime Text3安装liveReload_第5张图片

2)、打开sublime text 3编辑器,在菜单->preferences->Package Settings和package control选项,就说明安装package control成功了。

Sublime Text3安装liveReload_第6张图片


5.安装liveReload插件

快捷键 Ctrl+Shift+P(菜单 – Tools – Command Paletter),输入 install 选中Install Package并回车,输入或选择你需要的插件回车就安装了(注意左下角的小文字变化,会提示安装成功)。

Sublime Text3安装liveReload_第7张图片

在sublime下打开package control,搜索liveReload,然后下载,下载之后打开:首选项-package Settings-liveReload-settings user,然后在改文件下输入:

{

"enabled_plugins": [

"SimpleReloadPlugin",

"SimpleRefresh"

]

}

如下图所示:

Sublime Text3安装liveReload_第8张图片
sublime下liveReload配置


然后保存,这样每次打开sublime都相当于自动的运行了liveReload。(sass和less等都可以使用)

3,最后一步就是,当你用谷歌打开你文件的时候,记得按下插件按钮就ok了。

如下图所示按钮:

插件按钮(点击后中间会变为实心圆)

你可能感兴趣的:(Sublime Text3安装liveReload)