build: use gulp tasks to generate tgz downloads

* Update Copyright year to "2017-2019" range

Author: Ryan A. Johnson

LICENSE

@@ -1,4 +1,4 @@
-Copyright 2019 Rackspace US, Inc.
+Copyright 2017-2019 Rackspace US, Inc.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

gulpfile.esm.js

@@ -1,5 +1,2 @@
-import { task } from 'gulp';
-
-import { bundle } from './tasks/bundle';
-
-task('default', bundle);
+export * from './tasks';
+export { bundle as default } from './tasks';

package.json

@@ -32,6 +32,7 @@
     "gh-pages": "^2.0.0",
     "globby": "10.x",
     "gulp": "^4.0.2",
+    "gulp-tar": "^3.1.0",
     "highlight.js": "^9.12.0",
     "jsdoc": "^3.5.5",
     "jsdom": "^12.2.0",

scripts/_config/index.js

@@ -11,6 +11,7 @@ CONFIG.sourceDir = 'src';
 CONFIG.docsDir = 'docs';
 CONFIG.testDir = 'test';
 CONFIG.distDir = 'dist';
+CONFIG.tmpDir = '_tmp';
 
 // Component Explorer configuration
 // Used directly for "site" rendering context

scripts/_generate/index.js

@@ -10,9 +10,9 @@ const SASS = require('node-sass');
 const path = require('path');
 const tar = require('tar');
 const webpack = require('webpack');
-const { copy, ensureDir, ensureDirSync, remove } = require('fs-extra');
+const { ensureDir, ensureDirSync } = require('fs-extra');
+const { src, dest } = require('gulp');
 
-const pkg = require('../../package.json');
 const CONFIG = require('../_config');
 const { exec, readFile, writeFile } = require('../_util');
 
@@ -120,42 +120,15 @@ async function generateJSON () {
  * Generates downloadable *.tgz assets
  */
 async function generateDownloads () {
-    let destDir = `${CONFIG.publicDir}/downloads`;
+    console.log('Generate *.tgz Downloads');
+    await exec(`yarn gulp archive`, { cwd: CONFIG.root });
 
-    let downloads = [
-        {
-            src: CONFIG.distDir,
-            name: `helix-ui-${pkg.version}`,
-        },
-        {
-            src: `${CONFIG.sourceDir}/images/icons`,
-            name: `helix-ui-${pkg.version}-icons`,
-        }
+    let globs = [
+        `${CONFIG.tmpDir}/*.tgz`,
     ];
 
-    // Make sure destination exists
-    await ensureDir(destDir);
-
-    downloads.forEach(async function (dl) {
-        console.log(`Generating ${dl.name}.tgz`);
-        let tmpDir = `_tmp/${dl.name}`;
-
-        // Ensure a clean slate
-        await remove(tmpDir);
-
-        // Create temporary directory so we can customize
-        // the name of the uncompressed output.
-        await ensureDir(tmpDir);
-
-        await copy(dl.src, tmpDir);
-        await tar.create({
-            file: `${destDir}/${dl.name}.tgz`,
-            gzip: true,
-        }, [tmpDir]);
-
-        // Cleanup temporary files
-        await remove(tmpDir);
-    });
+    return src(globs)
+        .pipe(dest(`${CONFIG.publicDir}/downloads`));
 }//generateDownloads
 
 /**

tasks/archive/helix-ui.js

@@ -0,0 +1,93 @@
+/**
+ * dist/** --> {tmpDir}/{pkg.name}-{pkg.version}/** --> {tmpDir}/{pkg.name}-{pkg.version}.tgz
+ */
+import { ensureDir, readFile, remove, writeFile } from 'fs-extra';
+import { dest, parallel, series, src } from 'gulp';
+import tar from 'gulp-tar';
+import path from 'path';
+
+import { pkg, rootDir, tmpDir } from '../config';
+
+
+// target destination for the tarball
+const FILEPATH = `${tmpDir}/${pkg.name}-${pkg.version}.tgz`;
+// where to build tarball contents
+const TMP_DIR = `${tmpDir}/package`;
+// name of the tarball
+const FILENAME = path.basename(FILEPATH); // "{NAME}-{VERSION}.tgz"
+// target directory
+const DEST_DIR = path.dirname(FILEPATH); // "{tmpDir}"
+/*
+ * Collect globs for bundled dependency assets
+ * (as configured via "bundledDependencies" in package.json)
+ */
+const BUNDLED = pkg.bundledDependencies.map(dep => `node_modules/${dep}/**/*`);
+/*
+ * Define globs for all assets to be included in the package.
+ * (relative to the root of the project)
+ */
+const GLOBS = [
+    'LICENSE',
+    'README.md',
+    // extra files
+    'dist/**/*', // TODO: use config vars to compose this glob
+    ...BUNDLED,
+];
+
+
+async function writePackageJSON () {
+    let raw = await readFile(`${rootDir}/package.json`);
+    let data = JSON.parse(raw);
+
+    data.files = '*'; // include everything in {TMP_DIR} in the tarball
+
+    // remove unnecessary keys
+    delete data.scripts;
+    delete data.nyc;
+
+    await ensureDir(TMP_DIR);
+    await writeFile(`${TMP_DIR}/package.json`, JSON.stringify(data, null, 2));
+}
+
+function copyGlobFiles () {
+    return src(GLOBS, { base: '.' })
+        .pipe(dest(TMP_DIR));
+}
+
+
+async function _prepare () {
+    await remove(TMP_DIR);
+    await remove(FILEPATH);
+}
+
+
+/*
+ * Package asset bundles into tarball.
+ *
+ * This is similar to how NPM works via `npm pack`,
+ * but it allows us to have more control of the
+ * directory structure within the tarball.
+ *
+ * NOTE: bundles MUST be generated beforehand
+ */
+function createArchive () {
+    return src(`${TMP_DIR}/**/*`)
+        .pipe(tar(FILENAME, { gzip: true })) // archive...
+        .pipe(dest(DEST_DIR)); // write tarball to destination
+}
+
+const collectFiles = parallel(
+    copyGlobFiles,
+    writePackageJSON,
+);
+
+const archiveHelixUI = series(
+    _prepare,
+    collectFiles,
+    createArchive,
+);
+
+export {
+    FILEPATH,
+    archiveHelixUI,
+};

tasks/archive/icons.js

@@ -0,0 +1,37 @@
+import { src, dest } from 'gulp';
+import tar from 'gulp-tar';
+import path from 'path';
+
+import {
+    pkg,
+    pubDir,
+    site as siteCfg,
+    srcDir,
+    tmpDir,
+} from '../config';
+
+// what to include in the tarball
+const GLOBS = [
+    'LICENSE',
+    `${srcDir}/images/icons/*.svg`,
+];
+// path of generated tarball (relative to project root)
+const FILEPATH = `${tmpDir}/${pkg.name}-${pkg.version}-icons.tgz`;
+// where to build tarball contents
+const TMP_DIR = `${tmpDir}/icons`;
+// name of tarball (sans directory paths)
+const FILENAME = path.basename(FILEPATH);
+// where to place the tarball
+const DEST_DIR = path.dirname(FILEPATH);
+
+async function archiveIcons () {
+    return src(GLOBS)
+        .pipe(dest(TMP_DIR))
+        .pipe(tar(FILENAME, { gzip: true }))
+        .pipe(dest(DEST_DIR))
+}
+
+export {
+    FILEPATH,
+    archiveIcons,
+};

tasks/archive/index.js

@@ -0,0 +1,18 @@
+/**
+ * Create _tmp/*.tgz files
+ */
+import { parallel } from 'gulp';
+import { archiveHelixUI } from './helix-ui';
+import { archiveIcons } from './icons';
+
+// FYI: requires `gulp bundle --prod`
+const archive = parallel(
+    archiveHelixUI,
+    archiveIcons,
+);
+
+export {
+    archive,
+    archiveHelixUI,
+    archiveIcons,
+};

tasks/config.js

@@ -9,6 +9,7 @@ export const docsDir = 'docs'
 export const pubDir = 'public';
 export const srcDir = 'src';
 export const testDir = 'test';
+export const tmpDir = '_tmp';
 
 // Component Explorer Docs Configuration
 // Used directly for "site" rendering context

tasks/index.js

@@ -0,0 +1,2 @@
+export * from './archive';
+export { bundle } from './bundle';