build: update to use demo build

AlaskaAirlines · Jan 30, 2021 · c65d38c · c65d38c
1 parent bf71040
commit c65d38c
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 5 deletions.
diff --git a/.gitignore b/.gitignore
@@ -14,6 +14,7 @@ src/*.css
 
 ## dist files
 dist/
+build/
 
 ## Karma code coverage reports
 coverage/
diff --git a/README.md b/README.md
@@ -151,3 +151,7 @@ Open [localhost:8000](http://localhost:8000/)
 
 ### Testing
 Automated tests are required for every Auro component. See `.\test\auro-button.test.js` for the tests for this component. Run `npm test` to run the tests and check code coverage. Tests must pass and meet a certain coverage threshold to commit. See [the testing documentation](https://auro.alaskaair.com/support/tests) for more details.
+
+### Demo deployment
+
+To deploy a demo version of the component for review, run `npm run demo:build` to create a `./build` directory that can be pushed to any static server.
diff --git a/demo/index.html b/demo/index.html
@@ -7,16 +7,16 @@
     <link
       rel="stylesheet"
       type="text/css"
-      href="../node_modules/prismjs/themes/prism.css"
+      href="https://unpkg.com/prismjs@latest/themes/prism.css"
     />
     <link rel="stylesheet" type="text/css" href="css/style.css" />
   </head>
   <body>
     <main></main>
 
     <script type="module">
-      import 'marked/marked.min.js';
-      import 'prismjs';
+      import 'https://unpkg.com/marked@latest/marked.min.js';
+      import 'https://unpkg.com/prismjs@latest/prism.js';
       fetch('/demo/demo.md')
         .then((response) => response.text())
         .then((text) => {
@@ -26,7 +26,6 @@
         });
     </script>
     <script type="module" src="../src/auro-button.js"></script>
-    <script type="module" src="../src/auro-button-light.js"></script>
     <script src="https://unpkg.com/@alaskaairux/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
     <script src="https://unpkg.com/@alaskaairux/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
     <script type="text/javascript">

diff --git a/package.json b/package.json
@@ -117,7 +117,13 @@
     "sassBuild:demo": "node-sass ./demo/sass/ --output ./demo/css/",
     "sassBuild:component": "node-sass ./src/ --output ./src/",
     "sassBuild:watch": "nodemon -e scss --watch src --exec npm run sassBuild:dev",
-    "postCss:component": "node ./scripts/postCss.js"
+    "postCss:component": "node ./scripts/postCss.js",
+    "demo:rmBuild": "rm -rf ./build",
+    "demo:newBuild": "mkdir ./build && mkdir ./build/css && mkdir ./build/demo",
+    "demo:copyDemo": "copyfiles -u 1 -V './demo/demo.md' ./build/demo",
+    "demo:copyIndex": "copyfiles -u 1 -V './demo/index.html' ./build",
+    "demo:updateIndex": "node ./scripts/prepForBuild",
+    "demo:build": "npm-run-all ciBuild demo:rmBuild demo:newBuild demo:copyIndex demo:copyDemo demo:updateIndex"
   },
   "husky": {
     "hooks": {

diff --git a/scripts/prepForBuild.js b/scripts/prepForBuild.js
@@ -0,0 +1,31 @@
+const fs = require('fs');
+const bundle = 'auro-button__bundled.js';
+const indexFile = './build/index.html';
+
+// File destination.txt will be created or overwritten by default.
+let copyFiles = async function() {
+  fs.copyFile(`./dist/${bundle}`, `./build/${bundle}`, (err) => {
+    if (err) throw err;
+    console.log(`${bundle} was copied to ./build dir`);
+  });
+
+  fs.copyFile(`./demo/css/style.css`, `./build/css/style.css`, (err) => {
+    if (err) throw err;
+    console.log(`CSS was copied to ./build dir`);
+  });
+}
+
+// Edit string in new index.html file
+fs.readFile(indexFile, 'utf8', function (err,data) {
+  copyFiles();
+
+  if (err) {
+    return console.log(err);
+  }
+
+  const element = data.replace(`../src/auro-button.js`, `auro-button__bundled.js`);
+
+  fs.writeFile(indexFile, element, 'utf8', function (err) {
+     if (err) return console.log(err);
+  });
+});