gulp+browser-sync 监听文件实现浏览器自动刷新

browser-sync 监听文件实现浏览器自动刷新

1.package.json 文件

{
    "name": "example-1",
    "description": "example-1",
    "author": "c.c.",
    "license": "ISC",
    "devDependencies": {
        "browser-sync": "^2.18.8",
        "run-sequence": "^1.2.2"
    },
    "dependencies": {
        "glup": "^1.0.14"
    }
}

2.gulpfile.js 文件

var gulp = require('gulp'),
    browserSync = require('browser-sync'),
    runSequence = require('run-sequence');

gulp.task('browserSync', function() {
    browserSync.init({
        server: {
            baseDir: './'
        }
    })
});

gulp.task('watch', ['browserSync'], function() {
    gulp.watch('./static/**/*.css', browserSync.reload);
    gulp.watch('./static/**/*.js', browserSync.reload);
    gulp.watch('index.html', browserSync.reload);
});

gulp.task('default', function(callback) {
    runSequence(['browserSync', 'watch'], callback);
});

3.安装模块

npm install

4.运行

glup

5 浏览器打开 http://localhost:3000/