4.3.0 Copy Fozzie module assets to module consumers (#67)

* Copy assets from node_modules into dist folder

* Update changelog, readme, version number

* Housekeeping/respond to comments

* Clean assets before copying new assets

* Add config unit tests for new options

* remove comment

* Use npm-assets over find-npm-assets

* Use promises to finish task once all assets are copied

* Fix lint errors

CHANGELOG.md

@@ -3,6 +3,25 @@
 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).
 
+v4.3.0
+------------------------------
+*August 10, 2017*
+
+### Added
+- Added `config.importedAssets` object.
+- Added imported assets paths to pathBuilder.
+- Added `copy:assets` task.
+- Added `clean:assets` task.
+- Added `watch:assets` task.
+- Unit tests added for new config and pathBuilder properties.
+- The Readme *Imported Assets config* section was added.
+- The Readme *Imported Assets pathBuilder* section was added.
+- The Readme was updated to document the new tasks added.
+
+### Changed
+- Updated clean task comments.
+- The `css:bundle` task loads the `importedAssetsDistDir` into postcss, so that Fozzie modules can access assets copied there.
+
 v4.2.0
 ------------------------------
 *August 08, 2017*

README.md

@@ -134,6 +134,14 @@ Runs the following tasks
 
   Removes any CSS already in the dist directory.
 
+- #### `clean:assets`
+
+  Removes any imported assets in the imported assets directory.
+
+- #### `copy:assets`
+
+  Copies assets from packages to the imported assets directory.
+
 - #### `css:bundle`
 
   Performs a variety of tasks including;
@@ -229,6 +237,10 @@ Runs the [`scripts:lint`](#scriptslint) and [`scripts:test`](#scriptstest) tasks
 
 Runs the [`images`](#images) task when an image file is changed.
 
+- #### `watch:assets`
+
+Runs the [`copy:assets`](#copyassets) task when when there are changes in node modules.
+
 ### `watch:docs`
 
 Runs the same tasks as [`watch`](#watch) as well as the following watch tasks.
@@ -283,6 +295,10 @@ Here is the outline of the configuration options, descriptions of each are below
         imgDir,
         svgSpriteFilename
     },
+    importedAssets: {
+        importedAssetsDir,
+        importedAssetsSrcGlob
+    },
     sw: {
         isEnabled,
         swDir,
@@ -456,6 +472,25 @@ Root dist directory for your assets.
   Filename of the SVG sprite which is generated from any SVG assets found in the image directory.
 
 
+### `importedAssets`
+
+- #### `importedAssetsDir`
+
+  Type: `string`
+
+  Default: `'imported-assets'`
+
+  Name of the directory where assets from node_modules will be copied to.
+
+- #### `importedAssetsSrcGlob`
+
+  Type: `string`
+
+  Default: `'node_modules/@justeat/**/*'`
+
+  Glob of packages containing assets to be copied to `importedAssetsDir`. Watched by [`watch:assets`](#watchassets).
+
+
 ### `sw`
 
 - #### `isEnabled`
@@ -755,6 +790,11 @@ These are the paths which the `pathBuilder` object provides.
   Default: `'dist/img'`
 
 
+- #### `importedAssetsDistDir`
+
+  Default: `'dist/imported-assets'`
+
+
 - #### `swOutputPath`
 
   Default: `'.'`

config.js

@@ -47,6 +47,14 @@ const ConfigOptions = () => {
             svgSpriteFilename: 'sprite.svg'
         },
 
+        /**
+         * Imported assets related variables
+         */
+        importedAssets: {
+            importedAssetsDir: 'imported-assets',
+            importedAssetsSrcGlob: 'node_modules/@justeat/**/*'
+        },
+
         /**
          * Service Worker related variables
          */
@@ -149,6 +157,7 @@ const ConfigOptions = () => {
                 css: Object.assign(config.css, options.css),
                 js: Object.assign(config.js, options.js),
                 img: Object.assign(config.img, options.img),
+                importedAssets: Object.assign(config.importedAssets, options.importedAssets),
                 sw: Object.assign(config.sw, options.sw),
                 copy: Object.assign(config.copy, options.copy),
                 docs: Object.assign(config.docs, options.docs),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeat/gulp-build-fozzie",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "description": "Gulp build tasks for use across Fozzie modules",
   "main": "index.js",
   "author": "Damian Mullins <[email protected]> (http://www.damianmullins.com)",
@@ -42,6 +42,7 @@
     "exorcist": "^0.4.0",
     "eyeglass": "^1.2.1",
     "filesizegzip": "^2.0.0",
+    "glob": "^7.1.2",
     "gulp": "^3.9.1",
     "gulp-cached": "^1.1.1",
     "gulp-changed": "^3.1.0",
@@ -69,6 +70,7 @@
     "helper-markdown": "^1.0.0",
     "helper-md": "^0.2.2",
     "jest-cli": "^20.0.0",
+    "npm-assets": "^0.1.2",
     "postcss-assets": "^4.2.0",
     "postcss-reporter": "^5.0.0",
     "postcss-scss": "^1.0.2",

pathBuilder.js

@@ -16,6 +16,8 @@ const buildPaths = config => {
         imgSrcDir: `${config.assetSrcDir}/${config.img.imgDir}`,
         imgDistDir: `${config.assetDistDir}/${config.img.imgDir}`,
 
+        importedAssetsDistDir: `${config.assetDistDir}/${config.importedAssets.importedAssetsDir}`,
+
         swOutputPath: `${config.webRootDir}`,
         swSrcDir: `${config.assetSrcDir}/${config.sw.swDir}`,
         swDistDir: `${config.assetDistDir}/${config.sw.swDir}`,

tasks/clean.js

@@ -7,7 +7,7 @@ const pathBuilder = require('../pathBuilder');
 /**
  * `clean:css` Task
  * ---------------------
- * Removes all files form the CSS dist directory.
+ * Removes all files from the CSS dist directory.
  *
  */
 gulp.task('clean:css', () => del(
@@ -18,7 +18,7 @@ gulp.task('clean:css', () => del(
 /**
  * `clean:scripts` Task
  * ---------------------
- * Removes all files form the JavaScript dist directory.
+ * Removes all files from the JavaScript dist directory.
  *
  */
 gulp.task('clean:scripts', () => del(
@@ -29,18 +29,29 @@ gulp.task('clean:scripts', () => del(
 /**
  * `clean:images` Task
  * ---------------------
- * Removes all images form the images dist directory.
+ * Removes all images from the images dist directory.
  *
  */
 gulp.task('clean:images', () => del(
     `${pathBuilder.imgDistDir}/**/*`)
 );
 
 
+/**
+ * `clean:assets` Task
+ * ---------------------
+ * Removes all imported assets from the imported assets dist directory.
+ *
+ */
+gulp.task('clean:assets', () => del(
+    `${pathBuilder.importedAssetsDistDir}/**/*`)
+);
+
+
 /**
  * `clean:docs` Task
  * -------------
- * Removes all files form the docs dist directory.
+ * Removes all files from the docs dist directory.
  *
  */
 gulp.task('clean:docs', () => del(

tasks/copy.js

@@ -2,8 +2,10 @@ const gulp = require('gulp');
 const gutil = require('gulp-util');
 const plumber = require('gulp-plumber');
 const gulpif = require('gulp-if');
-
+const copyAssets = require('npm-assets');
 const rev = require('gulp-rev');
+const glob = require('glob');
+
 const config = require('../config');
 const pathBuilder = require('../pathBuilder');
 
@@ -81,3 +83,44 @@ gulp.task('copy:img', () => {
 gulp.task('copy:fonts', () => {
     copy('fonts');
 });
+
+/**
+ * `copy:assets` Task
+ * ---------------------
+ * Copy assets from from packages to the dist folder.
+ *
+ */
+gulp.task('copy:assets', callback => {
+
+    const ending = 'package.json';
+    const getPkg = filepath => {
+        const path = filepath.slice(0, -ending.length); // the parent directory that contains the package.json
+        const split = path.split('/'); // e.g. [...'@justeat', '', 'fozzie', '']
+        return {
+            path,
+            name: split[split.length - 2]
+        };
+    };
+
+    glob(config.importedAssets.importedAssetsSrcGlob, (err, files) => {
+        if (err) config.gulp.onError(err);
+
+        const process = file => new Promise((resolve, reject) => {
+            const pkg = getPkg(file);
+            gutil.log(`❯❯ Copying any assets in ${pkg.path} to ${pathBuilder.importedAssetsDistDir}/${pkg.name}`);
+            copyAssets(pkg.path, `${pathBuilder.importedAssetsDistDir}/${pkg.name}`, e => {
+                if (e) {
+                    config.gulp.onError(e);
+                    reject();
+                } else resolve();
+            });
+        });
+
+        const promises = files
+            .filter(file => file.endsWith(ending)) // Only consider folders containing a package.json
+            .map(file => process(file));
+
+        Promise.all(promises).then(callback);
+    });
+
+});

tasks/css.js

@@ -31,7 +31,8 @@ const pathBuilder = require('../pathBuilder');
 gulp.task('css', callback => {
     runSequence(
         'scss:lint',
-        'clean:css',
+        ['clean:css', 'clean:assets'],
+        'copy:assets',
         'css:bundle',
         'copy:css',
         'css:lint',
@@ -116,7 +117,7 @@ gulp.task('css:bundle', () => gulp.src(`${pathBuilder.scssSrcDir}/**/*.scss`)
         postcss([
             // Converts any specified assets to data URIs
             assets({
-                loadPaths: [pathBuilder.imgSrcDir]
+                loadPaths: [pathBuilder.imgSrcDir, pathBuilder.importedAssetsDistDir]
             }),
 
             // Autoprefixes CSS properties for various browsers – browsers specified in package.json config

tasks/watch.js

@@ -15,7 +15,7 @@ gulp.task('watch', callback => {
 
     runSequence(
         'default',
-        ['watch:css', 'watch:scripts', 'watch:scripts:test', 'watch:images'],
+        ['watch:css', 'watch:scripts', 'watch:scripts:test', 'watch:images', 'watch:assets'],
         callback
     );
 
@@ -83,6 +83,20 @@ gulp.task('watch:images', () => {
 });
 
 
+/**
+ * `watch:assets` Task
+ * -------------
+ * Runs the `copy:assets` task when there are changes in node modules.
+ *
+ */
+gulp.task('watch:assets', () => {
+
+    gulp.watch(config.importedAssets.importedAssetsSrcGlob, ['copy:assets'])
+        .on('change', config.gulp.changeEvent);
+
+});
+
+
 /**
  * `watch:docs` Task
  * -------------

test/config.test.js

@@ -233,6 +233,40 @@ describe('image config', () => {
     });
 });
 
+describe('imported assets config', () => {
+
+    it('imported assets directory should be set', () => {
+        expect(config.importedAssets.importedAssetsDir).toBe('imported-assets');
+    });
+
+    it('imported assets directory can be updated', () => {
+        // Arrange
+        const importedAssetsDir = 'imports';
+
+        // Act
+        config.update({ importedAssets: { importedAssetsDir } });
+
+        // Assert
+        expect(config.importedAssets.importedAssetsDir).toBe(importedAssetsDir);
+    });
+
+    it('imported assets source glob should be set', () => {
+        expect(config.importedAssets.importedAssetsSrcGlob).toBe('node_modules/@justeat/**/*');
+    });
+
+    it('imported assets source glob can be updated', () => {
+        // Arrange
+        const importedAssetsSrcGlob = 'node_modules/**/*';
+
+        // Act
+        config.update({ importedAssets: { importedAssetsSrcGlob } });
+
+        // Assert
+        expect(config.importedAssets.importedAssetsSrcGlob).toBe(importedAssetsSrcGlob);
+    });
+
+});
+
 describe('service worker config', () => {
 
     it('is enabled should be false', () => {

test/pathBuilder.test.js

@@ -44,6 +44,14 @@ describe('image paths', () => {
 
 });
 
+describe('imported assets paths', () => {
+
+    it('dist directory path should be correct', () => {
+        expect(pathBuilder.importedAssetsDistDir).toBe('dist/imported-assets');
+    });
+
+});
+
 describe('service worker paths', () => {
 
     it('output path should be correct', () => {