@unic/estatico-browsersync

Uses Browsersync to serve and realod files.

Installation

$ npm install --save-dev @unic/estatico-browsersync

Usage

const gulp = require('gulp');
const env = require('minimist')(process.argv.slice(2));

/**
 * Serve task
 * Uses Browsersync to serve the build directory, reloads on changes
 */
gulp.task('serve', () => {
  const task = require('@unic/estatico-browsersync');

  const instance = task({
    plugins: {
      browsersync: {
        server: './dist',
        watch: './dist/**/*.{html,css,js}',
      },
    },
  }, env);

  return instance();
});

Run task (assuming the project's package.json specifies "scripts": { "gulp": "gulp" }): $ npm run gulp serve

API

plugin(options, env) => taskFn

options

plugins

Type: Object

plugins.browsersync (required)

Type: Object

Passed to browser-sync. See https://browsersync.io/docs/options for available options.

plugins.browsersync.server

Type: String
Default: null

Directory to serve.

plugins.browsersync.watch

Type: String
Default: null

Files to watch and reload.

plugins.browsersync.port

Type: Number
Default: null

On which port to expose the server.

plugins.browsersync.middleware

Type: Function
Default:

(req, res, next) => {
  // Rewrite POST to GET
  if (req.method === 'POST') {
    req.method = 'GET';
  }

  // Respond with optional delay
  // Example: http://localhost:9000/mocks/demo/modules/slideshow/modules.json?delay=5000
  const delay = req.url.match(/delay=([0-9]+)/);

  if (delay) {
    setTimeout(() => {
      next();
    }, delay[1]);
  } else {
    next();
  }
},

Transform requests.

logger

Type: { info: Function, debug: Function, error: Function }
Default: Instance of estatico-utils's Logger utility.

Set of logger utility functions used within the task.

env

Type: Object
Default: {}

Result from parsing CLI arguments via minimist, e.g. { dev: true, watch: true }. Currently unused.

License

Apache 2.0.