Write your own tags: live refresh, F5 free, gulp + browser-sync
Straight to the point, let’s first explain the positioning of this article:
I wrote this article because I have tested many front-end real-time refresh tools again and again in my usual study, some are smooth, some are crappy, some are simple, and some are troublesome. , After installing and then tossing, after tossing and uninstalling, it really took a lot of time to experience these. Just yesterday, I just finished tossing gulp+ browser-syncmethod, it is estimated that I can stop for a while. This article mainly introduces and summarizes the front-end page real-time refresh tools I have used and seen (that is, the meaning of page refresh after ctrl+s, friends who feel that F5 refresh is not troublesome, you don't have to read further) , I hope to save some time for you to choose your favorite tools, and less tangled, less gossip, let's start
List of tools (order: from easy to install to powerful)
1. An editor with a real-time preview function:
Atom brackets webstorm
The above three are well-known editors with many plug-ins and powerful functions. They have made great contributions to the work of front-end developers, and are also deeply loved by developers. Therefore, there are many tutorials, so I won't say more. Just google it and you'll know how to use their instant preview feature. But the timely preview of these tools is a bit uncomfortable: the preview interface is embedded in the editor interface, reducing the visual effect of the entire web page. Both Atom and Brackets have this problem (of course, this is not a problem, see it all). Personal preferences). For example, the Atom editor uses atom-preview-html to achieve the effect: the effect of webstorm's preview is very good. There will be multiple browser logo icons in the upper right corner. Just click on which browser you want to open. Very convenient. Webstorm itself is quite powerful in size and function among the editors well-known to front-end personnel. Except that the opening speed is a bit slow, there is nothing to say.
2.sublime text3
There is a reason for taking it out
sublime text3separately. First of all, it is the first editor I have used for a long time, and it is inevitable that there is no preference for personal feelings in it. What I like most is its super-fast opening response speed. It has a refreshing energy to do what it says. Even if a lot of plug-ins are installed, it does not feel slow at all. I like it.
When it comes to plug-ins, I have to say that the sublime editor does not have its own real-time preview function, but it can be achieved through plug-ins: for examplesidebarEnhancement, right-click on the html file name to open open in Browser to view the effect, which is actually the most traditional ctrl+s+F5 refresh the preview Dafa, just open the browser directly on the editor.You can still use the
livereloadmethod, but it is relatively old. If you are interested, you can google it (if you can tolerate all kinds of V1 promotion, V2 promotion and other irrelevant content occupying your page, of course, you can also use Baidu)As a novice in the past, I was afraid of command-line operation tools, so when I came into contact with the "F5 refresh-free tool" (click to enter its official website to download), I was suddenly attracted by its visual interface operation, and I used it in the browser. After opening the file in , after editing the code in the editor, ctrl+s can achieve automatic refresh, which is very convenient. I refreshed it again, and the node location I found in the browser disappeared all of a sudden. I was surprised when I was staring at the screen and reading the code. I was watching the big movie with relish and the computer black screen all of a sudden. The author of the tool has not updated it for many years, so he has to abandon the tool and find another way.
After searching all over the Internet, I finally found such a tool: browser-sync
Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。您可以想象一下：“假设您的桌子上有pc、ipad、iphone、android等设备，同时打开了您需要调试的页面，当您使用browsersync后，您的任何一次代码保存，以上的设备都会同时显示您的改动”。无论您是前端还是后端工程师，使用它将提高您30%的工作效率。
有了它，您不用在多个浏览器、多个设备间来回切换，频繁的刷新页面。更神奇的是您在一个浏览器中滚动页面、点击等行为也会同步到其他浏览器和设备中，这一切还可以通过可视化界面来控制。
以上是中文网站上的介绍，很是吸引我，果断决定就用它了！（其实国内也有一款之类似的工具puer ,二者功能接近，但BrowserSync更强大，我就主要介绍他了
开始安装：
1.下载安装node.js
2.安装 BrowserSync
您可以选择从Node.js的包管理（NPM）库中 安装BrowserSync。打开一个终端窗口，运行以下命令：
npm install -g browser-sync这条命令相当于告诉包管理器下载BrowserSync文件，并在全局下安装它们，您可以在所有项目(任何目录)中使用。
当然您也可以结合gulpjs或gruntjs构建工具来使用，在您需要构建的项目里运行下面的命令:
npm install --save-dev browser-sync3.启动 BrowserSync
一个基本用途是，如果您只希望在对某个css文件进行修改后会同步到浏览器里。那么您只需要运行命令行工具，进入到该项目（目录）下，并运行相应的命令：
静态网站
如果您想要监听.css文件, 您需要使用服务器模式。 BrowserSync 将启动一个小型服务器，并提供一个URL来查看您的网站。
// --files 路径是相对于运行该命令的项目（目录）
browser-sync start --server --files "css/*.css"如果您需要监听多个类型的文件，您只需要用逗号隔开。例如我们再加入一个.html文件
// --files 路径是相对于运行该命令的项目（目录）
browser-sync start --server --files "css/*.css, *.html"
// 如果你的文件层级比较深，您可以考虑使用 **（表示任意目录）匹配，任意目录下任意.css 或 .html文件。
browser-sync start --server --files "**/*.css, **/*.html"我们做了一个静态例子的示范，您可以下载示例包，文件您可以解压任何盘符的任何目录下，不能是中文路径。打开您的命令行工具，进入到BrowsersyncExample目录下，运行以下其中一条命令。Browsersync将创建一个本地服务器并自动打开你的浏览器后访问http://localhost:3000 地址， 这一切都会在命令行工具里显示。如果遇到can not GET/这样的提示，说明你在当前文件夹下没有index.html文件，如果想查看的是当前目录下的css文件夹下面的某html5.html文，要更改访问地址为：http://localhost:3000/css/html5.html ，这样就能正常访问了。
你也可以查看Browsersync静态示例视频：
不明白上述教程一定要点开看这个链接！！！这里视频演示的是使用方法
// 监听css文件
browser-sync start --server --files "css/*.css"
// 监听css和html文件
browser-sync start --server --files "css/*.css, *.html"动态网站
如果您已经有其他本地服务器环境PHP或类似的，您需要使用代理模式。 BrowserSync将通过代理URL(localhost:3000)来查看您的网站。
// 主机名可以是ip或域名
browser-sync start --proxy "主机名" "css/*.css"在本地创建了一个PHP服务器环境，并通过绑定Browsersync.cn来访问本地服务器，使用以下命令方式，Browsersync将提供一个新的地址localhost:3000来访问Browsersync.cn，并监听其css目录下的所有css文件。
browser-sync start --proxy "Browsersync.cn" "css/* .css"一点建议，其实也是gulp+browser-sync方法的介绍，算是本文核心（我现在用的方法）
我们建议您结合gulp或grunt来使用，我们这里有详细说明Gulp文档、Grunt文档。如果您还没有使用gulp或grunt，那么可以通过以上方式创建Browsersync
鉴于browser-sync中文网站上给出的教程已经很去那面细致了，我就照搬了部分过来，但是实际使用browser-sync之后，估计你会发现，每次启动都要打开git bash或者其他命令窗工具，输入
browsersync start --server --file "/.html，/*.css"命令行的方法太冗长，所以我就研究了下搭配gulp使用的方法，实际证明官方推荐的方法确实蛮省劲儿的，但是他们没有给出具体详细的设置方法，我在这里写点更为详细的方法好了：
肯定有对gulp工具不是很熟悉的人看这篇文，一次都没接触过也不用怕，他就像个大管家，是来统筹管理前端各类比较杂的工具的大总管，你是主人，有什么需要提前给他吩咐好，他会去让各种工具有序干活儿。所以这里可以理解为把启动browser-sync的命令交由gulp去完成，我们的目标是只要在命令框里输入个gulp就能执行browser-sync。
这里推荐一篇学习gulp的文章,注意学习其中对于命令行参数的解释
在上面的教程中的gulpfile.js文件中写好如下内容：
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
// Static server
gulp.task('browser-sync', function() {
var files = [
'**/*.html',
'**/*.css',
'**/*.js'
];
browserSync.init(files,{
server: {
baseDir: "./"
}
});
});
// Domain server
//gulp.task('browser-sync', function() {
// browserSync.init({
// proxy: "yourlocal.dev"
// });
//});
gulp.task('default',['browser-sync']); //定义默认任务上面的代码中Domain server部分是针对启用了本地服务器的设置方法，注意proxy： "yourlocal.dev" 中的dev有很重要的作用哦！下面引用一段stackoverflow上人们的评论看下
stackoverflow commits start
QUESTION: BrowserSync extremely slow???
The solution is quite simple - but illogical imho. I had my local instance running under http://project.local. Changing it to http://project.dev solved the issue. I'm running OS X.
Works. But... but... why? – henrijs Nov 7 '14 at 8:42
:-) If you are running OS X as well, I guess it has something to do with DNS lookups (Bonjour is using the .local domain as well). – Rico Leuthold Nov 7 '14 at 16:01
Amazing tip for mac users. Thanks so much! – Armel Larcier Nov 15 '14 at 16:13
Had the same issue on Linux Ubuntu 14 and changing my URL from 'local.domain.co.uk' to 'domain.dev' worked perfectly! So thank you as never would of solved it otherwise. – Josh Davies Mar 26 at 11:44
This works on Ubuntu 14.10. An explanation as to why a .com slows browserSync down would be nice though. – fauxnoir Jun 11 at 21:10
stackoverflow commits end
Then reopen the command line tool, type "gulp", then press enter, wait a moment, see if you can open browser-sync?
Here, browser-sync is actually set as the default task of gulp. When you need to use gulp to call other tools, you can make changes.