gulp+browser-sync實現前端自動化刷新

寫在前面

1. 安裝環境前，默認安裝了node環境

2. 會使用基本的命令行操做

步驟

初始化環境

1. 新建一個文件夾

2. 在文件夾打開命令行

   npm init

   一直回車默認選項就能夠啦，也能夠本身設置

3. 最後一次回車結束後，會生成一個package.json文件

安裝gulp

1. 如果第一次使用gulp，則須要先全局安裝gulp

   npm install --global gulp

2. 若已經全局安裝gulp,則直接在工程根目錄下：

   npm install gulp --save-dev

3. 輸入gulp -v,顯示版本說明安裝成功

安裝browser-sync

npm install browser-sync --save-dev

配置gulpfile文件

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

// Static server
gulp.task('browser-sync', function() {
    var files = [
    '**/*.html',   // 監聽html
    '**/*.css', // 監聽css
    '**/*.js' // 監聽js
    ];
    browserSync.init(files,{
        server: {
            baseDir: "./"
        }
    });
});

gulp.task('default',['browser-sync']);

測試

在工程根目錄下打開命令行運行：

gulp

若上述無錯誤，將會在瀏覽器打開3000端口，這時輸入相應的文件名.html就能夠訪問頁面並實時刷新。好比有一個文件名叫主頁.html，在瀏覽器地址欄輸入http://localhost:3000/主頁.html便可。