Adding browser-sync task along with config settings and tests. (#76)

* Adding browser sync tasks.

* Updated browsersync variable names and added documentation & tests.

* Revert rename change.

* Updated readme and comments.

* Bumped package version.

* Fixed incorrect release date.

* Updated changelog.

* Renamed browser sync file.

* Removed tasks before config property.

* Added `docsAssetsDistDir` to pathBuilder.

CHANGELOG.md

@@ -3,9 +3,17 @@
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+v5.1.0
+------------------------------
+*August 16, 2017*
+
+### Added
+- Added `browser-sync` task along with config settings and tests.
+- Added `docsAssetsDistDir` path to `pathBuilder`.
+
 v5.0.0
 ------------------------------
-*August 14, 2017*
+*August 16, 2017*
 
 ### Changed
 - JavaScript task can now handle multiple files to be bundled via Browserify/Babel.  Check the README for updated config changes.

README.md

@@ -251,13 +251,17 @@ Runs the [`assemble`](#assemble) task when documentation files are changed.
 
 - #### `docs`
 
-This will build a fresh copy of any documentation found in the `docs` directory using Assemble, then call the [`watch`](#watch) task which will watch for any file changes, and finally call the [`browserSync:docs`](#browsersyncdocs) task which reloads the web page when changes are detected in the `docs/dist` directory.
+This will build a fresh copy of any documentation found in the `docs` directory using Assemble, then call the [`watch`](#watch) task which will watch for any file changes, and finally call the [`browser-sync:docs`](#browser-syncdocs) task which reloads the web page when changes are detected in the `docs/dist` directory.
 
 - #### `clean:docs`
 
 Removes document files already in the docs dist directory.
 
-- #### `browserSync:docs`
+- #### `browser-sync`
+
+Watches for changes to files and reloads a local website instance.
+
+- #### `browser-sync:docs`
 
 Refreshes the browser when changes to the docs dist directory are detected.
 
@@ -331,6 +335,11 @@ Here is the outline of the configuration options, descriptions of each are below
     fonts: {
       fontsDir
     },
+    browserSync: {
+        files,
+        proxy,
+        reloadDebounce
+    },
     misc: {
         showFileSize,
         showFiles
@@ -715,6 +724,32 @@ An Object, that takes one or more child objects each describing a JavaScript bun
 
   Name of the directory where your font files are kept.
 
+### `browserSync`
+
+- #### `files`
+
+  Type: `array`
+
+  Default: `[]`
+
+  List of paths to watch for changes. Accepts globs.
+
+- #### `proxy`
+
+  Type: `string`
+
+  Default: `''`
+
+  URL of local website instance.
+
+- #### `reloadDebounce`
+
+  Type: `number`
+
+  Default: `1000`
+
+  Wait for a specified window of event-silence before sending any reload events.
+
 ### `misc`
 
 - #### `showFileSize`
@@ -852,6 +887,11 @@ These are the paths which the `pathBuilder` object provides.
   Default: `'./docs/src/data'`
 
 
+- #### `docsAssetsDistDir`
+
+  Default: `'./docs/dist/assets/'`
+
+
 - #### `docsCssDistDir`
 
   Default: `'./docs/dist/assets/css'`

config.js

@@ -102,6 +102,12 @@ const ConfigOptions = () => {
             fontsDir: 'fonts'
         },
 
+        browserSync: {
+            files: [],
+            proxy: '',
+            reloadDebounce: 1000
+        },
+
         /**
          * Banners and info
          */
@@ -170,6 +176,7 @@ const ConfigOptions = () => {
                 copy: Object.assign(config.copy, options.copy),
                 docs: Object.assign(config.docs, options.docs),
                 fonts: Object.assign(config.fonts, options.fonts),
+                browserSync: Object.assign(config.browserSync, options.browserSync),
                 misc: Object.assign(config.misc, options.misc),
                 gulp: Object.assign(config.gulp, options.gulp)
             });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeat/gulp-build-fozzie",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "Gulp build tasks for use across Fozzie modules",
   "main": "index.js",
   "author": "Damian Mullins <[email protected]> (http://www.damianmullins.com)",

pathBuilder.js

@@ -5,6 +5,7 @@ const buildPaths = config => {
 
     const docsSrcDir = `${config.docs.rootDir}/${config.docs.srcDir}`;
     const docsDistDir = `${config.docs.rootDir}/${config.docs.distDir}`;
+    const docsAssetsDistDir = `${docsDistDir}/${config.docs.assetDir}`;
 
     return {
         scssSrcDir: `${config.assetSrcDir}/${config.css.scssDir}`,
@@ -26,10 +27,11 @@ const buildPaths = config => {
         docsDistDir,
         docsTemplateDir: `${docsSrcDir}/${config.docs.templDir}`,
         docsDataDir: `${docsSrcDir}/${config.docs.dataDir}`,
-        docsCssDistDir: `${docsDistDir}/${config.docs.assetDir}${config.css.cssDir}`,
-        docsJsDistDir: `${docsDistDir}/${config.docs.assetDir}${config.js.jsDir}`,
-        docsImgDistDir: `${docsDistDir}/${config.docs.assetDir}${config.img.imgDir}`,
-        docsFontsDistDir: `${docsDistDir}/${config.docs.assetDir}${config.fonts.fontsDir}`,
+        docsAssetsDistDir,
+        docsCssDistDir: `${docsAssetsDistDir}${config.css.cssDir}`,
+        docsJsDistDir: `${docsAssetsDistDir}${config.js.jsDir}`,
+        docsImgDistDir: `${docsAssetsDistDir}${config.img.imgDir}`,
+        docsFontsDistDir: `${docsAssetsDistDir}${config.fonts.fontsDir}`,
 
         fontsSrcDir: `${config.assetSrcDir}/${config.fonts.fontsDir}`,
         fontsDistDir: `${config.assetDistDir}/${config.fonts.fontsDir}`

tasks-dev/browser-sync.js

@@ -0,0 +1,56 @@
+const gulp = require('gulp');
+const browserSync = require('browser-sync');
+
+const config = require('../config');
+const pathBuilder = require('../pathBuilder');
+
+
+/**
+ * `browser-sync` Task
+ * -------------
+ * Watches for changes to files and reloads a local website instance.
+ *
+ */
+gulp.task('browser-sync', ['watch'], () => {
+
+    const options = {
+        files: [
+            `./${pathBuilder.cssDistDir}/**/*.css`,
+            `./${pathBuilder.jsDistDir}/**/*.js`,
+            ...config.browserSync.files
+        ],
+        proxy: config.browserSync.proxy,
+        reloadDebounce: config.browserSync.reloadDebounce
+    };
+
+    browserSync.init(options);
+
+});
+
+
+/**
+ * `browser-sync:docs` Task
+ * -------------
+ * Generates the documentation files then opens the docs in a local server.
+ *
+ */
+gulp.task('browser-sync:docs', ['assemble'], () => {
+
+    const options = {
+        files: [
+            `${pathBuilder.docsDistDir}/**/*.html`,
+            `${pathBuilder.docsAssetsDistDir}**/*.css`,
+            `${pathBuilder.docsAssetsDistDir}**/*.js`
+        ],
+        server: {
+            baseDir: pathBuilder.docsDistDir,
+            serveStaticOptions: {
+                extensions: ['html']
+            }
+        },
+        reloadDebounce: config.browserSync.reloadDebounce
+    };
+
+    browserSync.init(options);
+
+});

tasks-dev/docs.js

@@ -16,7 +16,7 @@ gulp.task('docs', callback => {
     runSequence(
         'clean:docs',
         ['watch:docs', 'copy:fonts'],
-        'browserSync:docs',
+        'browser-sync:docs',
         callback
     );
 });

test/config.test.js

@@ -625,6 +625,55 @@ describe('fonts config', () => {
 
 });
 
+describe('browserSync config', () => {
+
+    it('files should be set', () => {
+        expect(config.browserSync.files).toEqual([]);
+    });
+
+    it('files can be updated', () => {
+        // Arrange
+        const files = ['/**/*'];
+
+        // Act
+        config.update({ browserSync: { files } });
+
+        // Assert
+        expect(config.browserSync.files).toBe(files);
+    });
+
+    it('proxy should be set', () => {
+        expect(config.browserSync.proxy).toBe('');
+    });
+
+    it('proxy can be updated', () => {
+        // Arrange
+        const proxy = 'localhost';
+
+        // Act
+        config.update({ browserSync: { proxy } });
+
+        // Assert
+        expect(config.browserSync.proxy).toBe(proxy);
+    });
+
+    it('reload debounce should be set', () => {
+        expect(config.browserSync.reloadDebounce).toBe(1000);
+    });
+
+    it('reload debounce can be updated', () => {
+        // Arrange
+        const reloadDebounce = 9001;
+
+        // Act
+        config.update({ browserSync: { reloadDebounce } });
+
+        // Assert
+        expect(config.browserSync.reloadDebounce).toBe(reloadDebounce);
+    });
+
+});
+
 describe('miscellaneous config', () => {
 
     it('show file size should be true', () => {

test/pathBuilder.test.js

@@ -86,6 +86,10 @@ describe('documentation paths', () => {
         expect(pathBuilder.docsDataDir).toBe('./docs/src/data');
     });
 
+    it('asset distribution directory path should be correct', () => {
+        expect(pathBuilder.docsAssetsDistDir).toBe('./docs/dist/assets/');
+    });
+
     it('css distribution directory path should be correct', () => {
         expect(pathBuilder.docsCssDistDir).toBe('./docs/dist/assets/css');
     });