gulp静态服务器的搭建

gulp静态服务器的搭建

对于vscode，编程的人都很熟悉，打开页面使用liveServer服务打开，用gulp来实现这种静态服务的搭建

我使用的是gulp@4版本，

//引入插件  其中gulp-load-plugins中的内部插件要自己下载，只是不需要引入了
var gulp=require("gulp");
var load=require("gulp-load-plugins")();
var browser=require("browser-sync").create();

function saveJS(done){
     gulp.src("./js/*.js")
    .pipe(load.concat("main.js"))
    .pipe(load.uglify())
    .pipe(load.rename("main.min.js"))
    .pipe(gulp.dest("./dist/js/"))
    .on("end",browser.reload);
     return done();
}

function saveCss(done){
    gulp.src("./sass/*.scss")
    .pipe(load.sass())
    .pipe(load.concat("main.css"))
    .pipe(load.minifyCss())
    .pipe(load.rename("main.min.css"))
    .pipe(gulp.dest("./dist/css/"))
    .on("end",browser.reload);  
    return done();
}

exports.default=function(){
    browser.init({   //服务
        server:"./",   //gulpfile 文件的目录
        port:4001
    })
    gulp.watch("./*.html",function(done){
        browser.reload();   //浏览器的自动刷新
        done();
    });
    gulp.watch("./js/*.js",saveJS);
    gulp.watch("./sass/*.scss",saveCss)
}