# 擁有實時重載(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 模板