gulp4.x自动刷新浏览器

var gulp = require("gulp")
var cssnano = require("gulp-cssnano")
var rename = require("gulp-rename")
var uglify = require('gulp-uglify')
var concat = require('gulp-concat')

var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');


gulp.task('css',function(done){
    gulp.src("./css/*.css")
    .pipe(cssnano())
    .pipe(rename({"suffix":".min"}))
    .pipe(gulp.dest("./css/dist/"))
    done();
});

gulp.task('html',function(done){
    gulp.src("./html/*.html")
    done();
});


gulp.task('vendorjs',function(done){
    gulp.src([
        './js/alert.js',
        './js/index.js'
    ])
    .pipe(concat('index.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./css/dist/'))
    done()
});


gulp.task('image',function(done){
    gulp.src("./images/*.*")
    .pipe(cache(imagemin()))
    .pipe(gulp.dest('./css/dist/'))
    done()
});


var browserSync = require('browser-sync').create();   // 浏览器自动刷新

gulp.task('reload', function(done){
    browserSync.reload();
    done()//记住,所有的task()都要这样做(done参数+done()回调,否则无法重新调用这个函数了)
});
gulp.task('server', function(done) {
    browserSync.init({
        port:3000,
        server: {
            baseDir: "./"
        }
    });
    gulp.watch(["./css/*.css","./js/*.js","./images/*.*","./html/*.html"],gulp.series('css','vendorjs','image','html','reload'))
    //俩种方式都可以
    //gulp.watch("./css/*.css",gulp.series('css','reload'))
    //gulp.watch("./js/*.js",gulp.series('vendorjs','reload'))
    //gulp.watch("./images/*.*",gulp.series('image','reload'))
    //gulp.watch("./html/*.html",gulp.series('html','reload'))


    done()//记住,所有的task()都要这样做(done参数+done()回调,否则无法重新调用这个函数了)
});

然后在命令窗口输入gulp server即可