跨浏览器 CSS 注入

能够在每次文件更改时（无需重新加载页面）注入新修改的 CSS，这种工作流程增强功能您永远不会真正欣赏……直到您失去它。

这正是我最近遇到的情况。

至少在过去的 12 个月里，我一直在使用 Grunt 和 LiveReload 浏览器扩展 在我的文件更改时注入 CSS。它感觉像一个非常好的工作流程，直到我不得不处理一个需要 IE7 和 IE8 支持的项目。我使用的 LiveReload 插件根本不支持旧版本的 IE。一年多来，我第一次不得不每次更改 CSS 时都手动刷新页面。这太痛苦了。这也是我构建 **Browser-Sync** 的原因。

介绍 Browser-Sync

Browser-sync 是一种工具，它为您提供跨浏览器 CSS 注入功能。它会监视您的文件，并且您进行更改的那一刻，它就会通知所有连接的浏览器重新加载（注入）新的 CSS。所有这些都在不重新加载页面的情况下完成。最重要的是，它适用于我能够测试的每个浏览器。

Browser-Sync 的诞生

我从一开始就知道，简单地将新的 CSS 插入浏览器非常容易。我必须解决的问题是如何将文件系统更改传达回浏览器。我之前使用的 Grunt + LiveReload 组合依赖于 WebSockets。这就是为什么它不支持旧版 IE 的原因。

认识 Socket.io

当我使用 Karma 运行单元测试时，我灵光一现。Karma 允许您在多个浏览器中运行测试。有一天，我在 IE8 中进行测试时，意识到 Karma 会在每次文件保存时自动重新运行测试。

Bingo。我找到了能够监视文件系统更改并向所有浏览器通报更改的内容。我开始深入研究 Karma 的源代码。最终，我发现他们正在使用 Socket.io 来实现这一点。

开始融合

一切都已就绪。以手动页面刷新带来的痛苦为动力，以 Socket.io 的发现为灵感，我已做好充分准备，构建一个我每天都会使用的工具。

设置

本指南假设您已经在项目中安装了 Grunt 并知道如何使用它。如果您不知道，则可以在 Grunt 网站上了解它。

Browser-sync 可以作为独立的命令行工具安装，也可以作为 Grunt 插件安装。由于 Grunt 目前很流行，因此我将重点介绍如何将其设置为 Grunt 任务。如果您更喜欢仅使用命令行的方法，请查看这些说明。

从与您的 Gruntfile.js 相同的文件目录中

npm install grunt-browser-sync

这会将 Browser-sync 本地安装到您的项目中。现在，您可以确保 Grunt 加载它，方法是在 Gruntfile.js 的末尾附近放置以下内容

grunt.loadNpmTasks('grunt-browser-sync');

最后，与所有 Grunt 插件一样，您需要提供一些配置。至少，您需要以下内容

// Inside the Gruntfile.js config object
browser_sync: {
    files: {
        src : 'assets/css/style.css'
    }
}

设置完配置后，您可以使用以下命令运行插件

grunt browser_sync

现在您应该会收到一个 HTML 代码片段，您可以将其粘贴到网站的页脚中。将其放置在那里。现在，每当您更改该 CSS 文件（或它被另一个构建过程更改）时，它都会自动注入到所有浏览器中。

注意：有多种方法可以指定多个文件，您也可以使用通配符（*）。有关更多信息，请参阅Github 上的自述文件。

更自动化的方式

上面的示例非常适合您已经拥有服务器的情况。例如，使用 WordPress 或 Rails 构建网站。但缺点是您需要手动将代码片段复制并粘贴到文件中。如果您使用的是静态文件（HTML、CSS 和 JS），则可以使用内置服务器。内置服务器会自动插入任何所需的 HTML 代码片段，因此您无需手动操作。

要使用内置服务器，只需像这样设置您的配置。

// Inside the Gruntfile.js config object
browser_sync: {
    files: {
        src : 'app/css/style.css'
    }, 
    options: {
      server: {
        baseDir: "app"
    }
  }
}

现在将从 app 目录提供文件，并且会为您完成注入 CSS 所需的所有操作。

更进一步

如果您使用上面的服务器选项，您是否注意到使用的 IP 地址和端口？通常类似于 192.168.0.8:3001？Browser-sync 尝试找出用于服务器的合适的外部 IP 地址。这意味着您应该能够从同一 WiFi 网络上的任何设备/计算机连接到它。这里很酷的一点是，CSS 注入也适用于所有移动设备和平板电脑。当您看到这种自动化操作时，您会发现很难离开它。

如果它对您不起作用

在我的测试中，我发现，在典型的 WiFi 网络中，Browser-sync 在获取正确的 IP 地址方面做得非常出色。但是，在大型办公室设置中，您可能会发现它选择的 IP 地址无法被其他设备/计算机访问。如果是这种情况，并且您知道正确的 IP 地址，只需将其作为选项提供，如下所示

// Inside the Gruntfile.js config object
browser_sync: {
    files: {
        src : 'app/css/style.css'
    }, 
    options: {
      server: {
        host: "192.168.1.1",
        baseDir: "app"
    }
  }
}

超越 CSS 注入

作为 CSS-Tricks 上的客座文章，我主要关注了设置工具的 CSS 注入部分。但 Browser-sync 的功能远不止于此！它有一个很棒的功能，叫做幽灵模式。

幽灵模式将跟踪所有连接的浏览器并保持以下内容同步

1. 滚动位置 – 在使用多显示器开发时非常有用
2. 表单字段 – 在一个浏览器中填写表单，所有其他浏览器都将填充这些数据。
3. 链接 – 正在查看新构建网站的几个页面？在所有设备上打开它，当您从一个页面导航到另一个页面时，所有浏览器都将跟随您！

总结

我希望这一切对你来说听起来都很酷。我非常喜欢构建 Browser-sync。我欢迎反馈和问题报告，以便我们能够作为一个社区来改进它。

请记住，Browser-sync 可以通过两种方式使用

• 独立版 – 全局安装，可在任何地方使用
• Grunt 插件 – 本地安装，配置为 Grunt 任务