带有实时重载和 CSS 注入功能的服务器

使用 BrowserSync 和 gulp，你可以轻松创建一个开发服务器，该服务器可以被同一 WiFi 网络上的任何设备访问。BrowserSync 还内置了实时重载功能，所以不需要其他配置。

首先安装模块：

$ npm install --save-dev gulp browser-sync

然后，考虑以下文件结构...

gulpfile.js
app/
  styles/
    main.css
  scripts/
    main.js
  index.html

...你可以轻松地从 app 目录提供文件，并在其中任何文件发生变化时让所有浏览器重新加载，只需在 gulpfile.js 中添加以下内容：

var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;

// 监视文件变化并重新加载
gulp.task('serve', function() {
  browserSync({
    server: {
      baseDir: 'app'
    }
  });

  gulp.watch(['*.html', 'styles/**/*.css', 'scripts/**/*.js'], {cwd: 'app'}, reload);
});

并在 index.html 中包含 CSS：

<html>
  <head>
    ...
    <link rel="stylesheet" href="styles/main.css">
    ...

要提供文件并启动指向默认 URL（http://localhost:3000）的浏览器窗口，请运行：

gulp serve

+ CSS 预处理器

一个常见的用例是在 CSS 文件经过预处理后重新加载它们。以 Sass 为例，这是如何指示浏览器在不进行完整页面刷新的情况下重新加载 CSS。

考虑这个更新后的文件结构...

gulpfile.js
app/
  scss/
    main.scss
  scripts/
    main.js
  index.html

...你可以轻松地监视 scss 目录中的 Sass 文件，并在其中任何一个文件发生变化时让所有浏览器重新加载，只需在 gulpfile.js 中添加以下内容：

var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var browserSync = require('browser-sync');
var reload = browserSync.reload;

gulp.task('sass', function() {
  return sass('scss/styles.scss')
    .pipe(gulp.dest('app/css'))
    .pipe(reload({ stream:true }));
});

// 监视 Sass 文件的变化，使用 'sass' 任务运行 Sass 预处理器并重新加载
gulp.task('serve', gulp.series('sass', function() {
  browserSync({
    server: {
      baseDir: 'app'
    }
  });

  gulp.watch('scss/*.scss', gulp.series('sass'));
}));

并在 index.html 中包含预处理的 CSS：

<html>
  <head>
    ...
    <link rel="stylesheet" href="css/main.css">
    ...

要提供文件并启动指向默认 URL（http://localhost:3000）的浏览器窗口，请运行：

gulp serve

其他功能

实时重载、CSS 注入和滚动/表单同步在 BrowserStack 虚拟机内无缝工作。
设置 tunnel: true 可以在公共 URL 查看你的本地站点（包含所有 BrowserSync 功能）。

带有实时重载和 CSS 注入功能的服务器

+ CSS 预处理器​

其他功能​

+ CSS 预处理器

其他功能