# 拥有实时重载（live-reloading）和 CSS 注入的服务器
使用 [BrowserSync](http://browsersync.io) 和 gulp，你可以轻松地创建一个开发服务器，然后同一个 WiFi 中的任何设备都可以方便地访问到。BrowserSync 同时集成了 live-reload 所以不需要另外做配置了。
首先安装模块：
```
$ npm install --save-dev browser-sync
```
然后，考虑拥有如下的目录结构...
```
gulpfile.js
app/
styles/
main.css
scripts/
main.js
index.html
```
... 通过如下的 `gulpfile.js`，你可以轻松地将 `app` 目录中的文件加到服务器中，并且所有的浏览器都会在文件发生改变之后自动刷新：
```
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
```
... 通过如下的 `gulpfile.js`，你可以轻松地监视 `scss` 目录中的文件，并且所有的浏览器都会在文件发生改变之后自动刷新：
```
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' 任务，并且重载文件
gulp.task('serve', ['sass'], function() {
browserSync({
server: {
baseDir: 'app'
}
});
gulp.watch('app/scss/*.scss', ['sass']);
});
```
在 `index.html` 文件中引入预处理后的 CSS 文件：
```
<html>
<head>
...
<link rel="stylesheet" href="css/main.css">
...
```
通过如下命令启动服务，并且打开一个浏览器，访问默认的 URL (http://localhost:3000)：
```
gulp serve
```
## 附注：
* 实时重载（Live reload），CSS 注入以及同步滚动可以在 [BrowserStack](http://www.browserstack.com/) 虚拟机里无缝执行。
* 设置 `tunnel: true` 来使用一个公开的 URL 来访问你本地的站点 (支持所有 BrowserSync 功能)。
- gulp 中文文档
- 入门指南
- gulp API 文档
- 编写插件
- 指导
- 使用 buffer
- 使用 Stream 处理
- 测试
- FAQ
- gulp 技巧集
- 整合 streams 来处理错误
- 删除文件和文件夹
- 使用 watchify 加速 browserify 编译
- 增量编译打包，包括处理整所涉及的所有文件
- 将 buffer 变为 stream (内存中的内容)
- 在 gulp 中运行 Mocha 测试
- 仅仅传递更改过的文件
- 从命令行传递参数
- 只重新编译被更改过的文件
- 每个文件夹生成单独一个文件
- 串行方式运行任务，亦即，任务依赖
- 拥有实时重载（live-reloading）和 CSS 注入的服务器
- 通过 stream 工厂来共享 stream
- 指定一个新的 cwd (当前工作目录)
- 分离任务到多个文件中
- 使用外部配置文件
- 在一个任务中使用多个文件来源
- Browserify + Uglify2 和 sourcemaps
- Browserify + Globs
- 同时输出一个压缩过和一个未压缩版本的文件
- 改变版本号以及创建一个 git tag
- Swig 以及 YAML front-matter 模板