【笔记】Gulp的BrowserSync插件

发表于 更新于 阅读次数：

前言

Gulp通过BrowserSync插件实现Web服务器

下载依赖

1
npm install -D browser-sync

修改配置文件

port：指定端口
open：指定是否自动打开浏览器
files：指定监听变化的文件来重启服务器
server.baseDir：指定Web服务的根目录

gulpfile.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const gulp = require("gulp");
const browserSync = require("browser-sync");

const bs = browserSync.create();

function build() {
  return gulp.src("./src/**/*.js")
      .pipe(gulp.dest("./dist"));
}

function serve() {
  bs.init({
    port: 8080,
    open: true,
    files: ["./dist/**/*"],
    server: {
      baseDir: "./dist"
    }
  });
  gulp.watch("./src/**/*.js", build);
}

const dev = gulp.series(build, serve);

module.exports.build = build;
module.exports.serve = serve;
module.exports.dev = dev;
module.exports.default = dev;

完成