步骤:
安装依赖: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