擁有實時重載（live-reloading）和 CSS 注入的服務器 · gulp 中文文檔

# 擁有實時重載（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 功能)。