实时刷新（及时预览）工具小汇总，兼有gulp+browser-sync设定办

单刀直入，第一说明一下本文的定位吧：
写这篇文章是由于本人在平常的学习中，一次次试验了许多的前端实时刷新工具，有顺手的，有蹩足的，有简便的，有费事的，安置完又折腾，折腾完又卸载，体验完这些也着实花费了不少时间，就在昨天又刚刚折腾完gulp+browser-sync的办法，估量可以让我消停一阵子了。这篇文章主要介绍和汇总一下我用过和见过的前端页面实时刷新工具（就是ctrl+s之后实现页面刷新的意思，觉得F5刷新也不费事的伴侣们就可以不必往下读了哈），但愿能为你选择本人喜爱的工具节约些时间，也少些纠结，闲言少叙，下面开端介绍。

1.自带及时预览功效的编纂器：

Atom brackets webstorm
上述三者都是大名鼎鼎的编纂器，插件众多，功效强大，为前端开发人员们在工作中立下丰功伟绩，也深受开发人员们的爱好，因此也是教程众多，我就不再多说了。google一下，你就知道怎样使用它们的及时预览功效了。但是这些工具的及时预览有一点不爽：预览界面内嵌在编纂器界面内，减小了对整张网页的视觉结果，Atom和Brackets都存在这样的问题（当然这也不算是问题了，全看个人喜欢）。如Atom编纂器使用atom-preview-html实现的结果：

而webstorm实现预览的结果是很赞的，右上角会有多个阅读器的logo图标，想在哪个阅读器翻开就点击哪个就好了，挺利便。webstorm本身也是算是前端人员熟知的编纂器中体量和功效相当强大的了，除了翻开速度有点慢之外，没啥说的。

2.sublime text3

把sublime text3独自拿出来说是有缘由的，第一它是我长期使用的第一款编纂器，有个人情愫在其中不免没有偏爱之心。最喜爱的就是它超快的翻开响应速度，有种说干就干的爽直劲儿，即使安置了一大堆的插件儿也丝毫没有觉得变迟缓，点个赞。
说到插件就不得不说sublime编纂器是没有自带及时预览功效的，但是可以通过插件来实现：比方sidebarEnhancement，在html文件名上右键翻开open in Browser就可以查看结果了，这其实就是最传统的 ctrl+s+F5刷新预览大法，只不外直接在编纂器上翻开阅读器了罢了。

还可以使用livereload办法，但是比力古老了，感乐趣的话可以google一下（假如你可以忍耐许许多多的V1推行，V2推行等不相关内容侵占你的页面，当然也可以用baidu啦）

之前作为新手，关于命令行操纵的工具有害怕感，所以接触到“F5免刷新工具的时候”(点击进入它的官网可下载)一下子被其可视化的界面操纵吸引了，用它在阅读器中翻开文件之后，在编纂器中编纂完代码，ctrl+s即可实现主动刷新，很利便，用了很长一段时间都觉得十分利便，但是比来发明它总是在没有停止任何操纵的时候主动刷新一遍，在阅读器中寻好的节点位置一下子又不见了，搞得正在盯着屏幕看代码的我很惊诧，有种正津津乐道看着大片儿一下子电脑黑屏的赶足，看了下工具作者好多年没更新了，只好依依难舍地先弃掉这一工具另谋它法。

在网上百般寻觅，最后寻到了这么一款工具：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-sync

3.启动 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或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上人们的评论看下

然后从新翻开命令行工具，键入“gulp"，然后回车，稍等会儿，看看是不是就能翻开browser-sync了？
这里其实就是把browser-sync设定为了gulp的默许任务了罢了，等你需要用到gulp调取其他工具的时候，可以再作修改。

以上就是实时刷新（及时预览）工具小汇总，兼有gulp+browser-sync设定办法的具体内容，更多请关注百分百源码网其它相关文章！