gulp-flow-browser-sync

Browser Sync bundle for gulp-flow.

Requirements

• gulp-flow must be installed.

Install

npm install --save-dev gulp-flow-browser-sync

or

yarn add --dev gulp-flow-browser-sync

Usage

By default this bundle is preconfigured in cfg.browserSync and add some methods in utils. See the source code for more details.

Task

A common use case:

'use strict';
 
let watched;
let gulp = require('gulp');
let flow = require('gulp-flow');
 
// load the browser sync bundle
require('gulp-flow-browser-sync');
 
let {cfg, gp, pipes, utils} = flow;
 
let {
  browserSync,
  createBrowserSyncInstance,
  initBrowserSyncInstance
} = utils;
 
 
//----------------------------------------------------------------------------//
 
flow.ensureEnv('local');
 
 
/*----------------------------------------------------------------------------*\
  Tasks
\*----------------------------------------------------------------------------*/
 
// browser-sync (livereload)
gulp.task(cfg.env + '.browser-sync', function() {
  createBrowserSyncInstance(cfg.env);
  return initBrowserSyncInstance(cfg.env);
});
 
 
/*----------------------------------------------------------------------------*\
  Watch
\*----------------------------------------------------------------------------*/
 
gulp.task(cfg.env + '.watch', function() {
  // ensure only once execution
  if(watched) {
    throw new Error(cfg.env + '.watch task is already active.');
  }
 
  watched = true;
 
  //------------------------------------------------------------------------//
 
  const reloadBrowser = browserSync.get(cfg.env).reload;
 
 
  /*------------------------------------------------------------------------*\
    Watchers
  \*------------------------------------------------------------------------*/
 
  // CSS
  gulp.watch(
    cfg.css.srcWatch,
    gulp.series(
      cfg.env + '.build.css',
      reloadBrowser
    )
  );
 
  // JS
  gulp.watch(
    './src/**/*.{js,jsx}',
    gulp.series(
      cfg.env + '.build.js',
      reloadBrowser
    )
  );
 
  // files
  gulp.watch(
    cfg.files.srcWatch,
    gulp.series(
      'build.files',
      reloadBrowser
    )
  );
});

And run your tasks: gulp local

LICENSE

MIT (c) 2016, Nicolas Tallefourtane.

Author

Nicolas Talle