>Browser-sync插件能讓瀏覽器實時、快速響應您的文件更改并自動刷新頁面。
>gulp用自動化構建工具增強你的工作流程,使用它，我們主要是為了進行css或者js的壓縮或者打包等工作
### gulp的安裝
#### 全局安裝
~~~
npm install -g gulp
~~~
#### 局部安裝
~~~
npm install --save-dev gulp
~~~
### browser-sync與gulp的配合使用
#### 安裝插件
~~~
npm install --save-dev gulp
npm install --save-dev browser-sync
npm install --save-dev gulp-sass
~~~
#### 編寫腳本(gulpfile.js)
~~~
// 加載插件
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
var reload = browserSync.reload;
// 定義文件路徑
var src = {
scss: 'app/scss/*.scss',
css: 'app/css',
html: 'app/*.html'
};
// 監視靜態資源
gulp.task('serve', ['sass'], function() {
browserSync.init({
server: "./app"
});
gulp.watch(src.scss, ['sass']);
gulp.watch(src.html).on('change', reload);
});
// 編寫sass文件轉換的任何
gulp.task('sass', function() {
return gulp.src(src.scss)
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(src.css))
.pipe(reload({stream: true}));
});
// 啟動后，執行默認的serve任務
gulp.task('default', ['serve']);
~~~
>解析： 腳本中監測sass文件，發現sass文件改動，會自動生成對應的css文件，并自動刷新頁面
> 項目目錄下的任意html文件改變，也會自動刷新
#### 添加運行腳本到package.json文件
~~~
"script" : {
"start": "gulp"
}
~~~
>解析: 運行"npm run start"命令啟動gulp
