From 7c5a541ce1af0d2d30102eabda4de2fc4eedadaa Mon Sep 17 00:00:00 2001 From: Damian Mullins Date: Thu, 17 Aug 2017 09:35:54 +0100 Subject: [PATCH] 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 | 10 ++++++- README.md | 44 ++++++++++++++++++++++++++++-- config.js | 7 +++++ package.json | 2 +- pathBuilder.js | 10 ++++--- tasks-dev/browser-sync.js | 56 +++++++++++++++++++++++++++++++++++++++ tasks-dev/browserSync.js | 29 -------------------- tasks-dev/docs.js | 2 +- test/config.test.js | 49 ++++++++++++++++++++++++++++++++++ test/pathBuilder.test.js | 4 +++ 10 files changed, 175 insertions(+), 38 deletions(-) create mode 100644 tasks-dev/browser-sync.js delete mode 100644 tasks-dev/browserSync.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 35fdaad..1e7141d 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/README.md b/README.md index 8d96c38..5b12e0a 100644 --- a/README.md +++ b/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'` diff --git a/config.js b/config.js index 00bc326..2adaad2 100644 --- a/config.js +++ b/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) }); diff --git a/package.json b/package.json index 9899d92..be4a77d 100644 --- a/package.json +++ b/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 (http://www.damianmullins.com)", diff --git a/pathBuilder.js b/pathBuilder.js index be1f400..faa4c77 100644 --- a/pathBuilder.js +++ b/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}` diff --git a/tasks-dev/browser-sync.js b/tasks-dev/browser-sync.js new file mode 100644 index 0000000..c4b6ab1 --- /dev/null +++ b/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); + +}); diff --git a/tasks-dev/browserSync.js b/tasks-dev/browserSync.js deleted file mode 100644 index 11d9bde..0000000 --- a/tasks-dev/browserSync.js +++ /dev/null @@ -1,29 +0,0 @@ -const gulp = require('gulp'); -const browserSync = require('browser-sync'); - -const pathBuilder = require('../pathBuilder'); - -/** - * `browserSync:docs` Task - * ------------- - * Generates the documentation files then opens the docs in a local server. - * - */ -gulp.task('browserSync:docs', ['assemble'], () => { - - browserSync.init({ - files: [ - `${pathBuilder.docsDistDir}/**/*.html`, - `${pathBuilder.docsDistDir}/assets/**/*.css`, - `${pathBuilder.docsDistDir}/assets/**/*.js` - ], - server: { - baseDir: pathBuilder.docsDistDir, - serveStaticOptions: { - extensions: ['html'] - } - }, - reloadDebounce: 1000 // debounce our reloads by a second, to avoid multiple un-needed syncs - }); - -}); diff --git a/tasks-dev/docs.js b/tasks-dev/docs.js index fea8c30..79fe714 100644 --- a/tasks-dev/docs.js +++ b/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 ); }); diff --git a/test/config.test.js b/test/config.test.js index 499ac66..9c136d4 100644 --- a/test/config.test.js +++ b/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', () => { diff --git a/test/pathBuilder.test.js b/test/pathBuilder.test.js index 6dea8bd..9a22f00 100644 --- a/test/pathBuilder.test.js +++ b/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'); });