步骤:
安装依赖:npm i browser-sync --save-dev
导入browser-sync,通过create创建
设置Sass和Js任务,将其压缩重命名并引入页面,任务结束时reload服务
设置默认任务,此任务负责,初始化服务器,监视setJs和setCss的变化
var gulp = require("gulp");
var browser = require("browser-sync").create();
var concat = require("gulp-concat");
var rename = require("gulp-rename");
var sass = require("gulp-sass");
var minifyCss = require("gulp-minify-css");
var uglify = require("gulp-uglify");
gulp.task("setJs",()=>{
gulp.src("./src/js/*.js")
.pipe(concat("c.js"))
.pipe(uglify())
.pipe(rename("c.min.js"))
.pipe(gulp.dest("./dist"))
.on("end",browser.reload);
});
gulp.task("setSass",()=>{
gulp.src("./src/sass/*.scss")
.pipe(sass())
.pipe(rename("main.min.css"))
.pipe(minifyCss())
.pipe(gulp.dest("./dist/"))
.on("end",browser.reload);
});
gulp.task("default",()=>{
browser.init({
server:'./',
port:4011
});
gulp.watch("./src/sass/*.scss",["setSass"]);
gulp.watch("./src/js/*.js",["setJs"]);
});
来源:https://www.cnblogs.com/ltfxy/p/12366051.html