使用 Gulp4 的最小 BrowserSync 设置

BrowserSync 是一个很棒的工具，可以通过实时重载功能将代码更改即时反映在浏览器中，从而简化开发过程。使用 Gulp 4 设置一个实时重载的 BrowserSync 服务器非常简洁和容易。

步骤 1: 安装依赖

npm install --save-dev browser-sync

步骤 2: 设置项目结构

src/
  scripts/
    |__ index.js
dist/
  scripts/
index.html
gulpfile.babel.js

这里的目标是：

• 构建 src/scripts/ 中的源脚本文件，例如使用 babel 编译、压缩等
• 将编译后的版本放入 dist/scripts 以供 index.html 使用
• 监视源文件的变化并重新构建 dist 包
• 每次重新构建 dist 包时，重新加载浏览器以立即反映更改

步骤 3: 编写 gulpfile

gulpfile 可以分为 3 部分。

1. 照常编写准备 dist 包的任务

更多信息请参考主要的 README。

import babel from 'gulp-babel';
import concat from 'gulp-concat';
import del from 'del';
import gulp from 'gulp';
import uglify from 'gulp-uglify';

const paths = {
  scripts: {
    src: 'src/scripts/*.js',
    dest: 'dist/scripts/'
  }
};

const clean = () => del(['dist']);

function scripts() {
  return gulp.src(paths.scripts.src, { sourcemaps: true })
    .pipe(babel())
    .pipe(uglify())
    .pipe(concat('index.min.js'))
    .pipe(gulp.dest(paths.scripts.dest));
}

2. 设置 BrowserSync 服务器

并编写任务来相应地提供和重载服务器。

import browserSync from 'browser-sync';
const server = browserSync.create();

function reload(done) {
  server.reload();
  done();
}

function serve(done) {
  server.init({
    server: {
      baseDir: './'
    }
  });
  done();
}

3. 监视源代码变化，重建脚本并重载服务器

使用 gulp.series 可以轻松完成这一点

const watch = () => gulp.watch(paths.scripts.src, gulp.series(scripts, reload));

步骤 4: 把它们组合在一起

最后一步是公开默认任务

const dev = gulp.series(clean, scripts, serve, watch);
export default dev;

然后获取收益

$ gulp

现在如果你访问 http://localhost:3000，这是 BrowserSync 服务器的默认地址，你会看到每次更改源文件内容时，浏览器中的最终结果都会更新。以下是完整的 gulpfile：

import babel from 'gulp-babel';
import concat from 'gulp-concat';
import del from 'del';
import gulp from 'gulp';
import uglify from 'gulp-uglify';
import browserSync from 'browser-sync';

const server = browserSync.create();

const paths = {
  scripts: {
    src: 'src/scripts/*.js',
    dest: 'dist/scripts/'
  }
};

const clean = () => del(['dist']);

function scripts() {
  return gulp.src(paths.scripts.src, { sourcemaps: true })
    .pipe(babel())
    .pipe(uglify())
    .pipe(concat('index.min.js'))
    .pipe(gulp.dest(paths.scripts.dest));
}

function reload(done) {
  server.reload();
  done();
}

function serve(done) {
  server.init({
    server: {
      baseDir: './'
    }
  });
  done();
}

const watch = () => gulp.watch(paths.scripts.src, gulp.series(scripts, reload));

const dev = gulp.series(clean, scripts, serve, watch);
export default dev;