• 浏览器同步测试神器 — BrowserSync


    Browsersync 能让浏览器实时、快速响应文件更改(html、js、css、sass、less等)并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试,当使用browsersync后,任何一次代码保存,以上的设备都会同时响应文件的改动。效果如下:

    (图片来自:http://www.browsersync.cn/

     

    如何使用?

    1、安装Node.js

    BrowserSync是基于Node.js的, 是一个Node模块,Node.js可以从官网下载,当前最新版本6.2.0,稳定版本4.4.4,建议下载最新版,下载后直接安装即可。

    下载地址: http://nodejs.cn/

    2、安装 BrowserSync

    在终端窗口中运行以下命令(全局安装以便在所有的项目中都能使用):

    npm install -g browser-sync

    若配合gulp或grunt等构建工具使用,则可以在需要构建的项目里面安装:

    npm install --save-dev browser-sync

    3、启动 Browser-Sync

    静态网站

    假如需要监听 .css 文件,则在终端输入如下命令即可(Browser-sync 会启动一个小型服务器,并提供一个 url 来查看网站):

    // --files 路径是相对于运行该命令的项目(目录) 
    browser-sync start --server --files "css/*.css"

    若需要监听多个类型的文件,用逗号隔开即可:

    // --files 路径是相对于运行该命令的项目(目录) 
    browser-sync start --server --files "css/*.css, *.html"
    // 如果文件层级比较深,您可以考虑使用 **(表示任意目录)匹配,任意目录下任意.css 或 .html文件。 
    browser-sync start --server --files "**/*.css, **/*.html"

    动态网站

    如果要在本地服务器下监听文件变化,则需要使用代理模式,BrowserSync 将通过代理 URL(localhost:3000) 来查看网站。

    // 主机名可以是ip或域名
    browser-sync start --proxy "主机名" "css/*.css"

    运行效果如下:

    和LiveReload比较

    LiveReload 需要搭配浏览器插件。Chrome和Firefox都有可用插件,但在IE或者手机浏览器没有对应的插件。

    BrowserSync 则不需要浏览器插件,一句简单的控制台命令之后,无论是在手机还是电脑,无论用多少个浏览器,都可以拥有自动刷新的功能。

    为什么BrowserSync不需要浏览器插件?

    因为它使用了服务器的形式(直接或代理)来处理项目文件。默认情况下,访问它的服务器上的网页,可以看到这样的提示签:

    这说明当前浏览的网页已连接到BrowserSync。查看一下源码,会发现它们都被添加了与BrowserSync有关的一段 <script> 代码,就像LiveReload浏览器插件做的那样。这些代码会在浏览器和BrowserSync的服务器之间建立web socket连接,一旦有监听的文件发生变化,BrowserSync会通知浏览器。

    单页应用?

    如果发生变化的文件是css,BrowserSync 不会刷新整页,而是直接重新请求这个css文件,并更新到当前页中。

    如果你正在开发的是一个单页应用,刷新整页会回到初始视图,而你又需要修改后面的某一个视图时,这一功能尤其有用。

    在Gulp中使用 BrowserSync

    Gulp是现在流行的自动化工具,但BrowserSync并没有Gulp插件版,因为并不需要。BrowserSync有自己独立的API,将它注册为gulp的一个task即可。如下:

    var gulp = require('gulp');
    var browserSync = require('browser-sync');
    gulp.task('browser-sync', function() {
        browserSync({
            files: "**",
            server: {
                baseDir: "./"
            }
        });
    });
    gulp.task('default', ["browser-sync"]);

     这时候运行 gulp 将等同于前文的 browser-sync start --server --files "**"  。

    参考资料

    http://www.browsersync.cn/

    http://www.tuicool.com/articles/vUriay

  • 相关阅读:
    ASP.NET 无提示关闭窗口
    C# Winform程序获取外网IP地址
    使用System.Drawing.Printing 画报表。
    C# Winform调用IP地址、手机归属和身份证查询接口
    C# 获取文中文字符首字母
    C# WinForm给Button或其它控件添加快捷键响应
    C# 获取农历日期
    TSQL之插入的内容是查询出的值
    C# 获取中文星期的两种方法
    C#批量操作控件
  • 原文地址:https://www.cnblogs.com/wx1993/p/6065905.html
Copyright © 2020-2023  润新知