PracticeJavaScript · spacerockzero · May 6, 2017 · May 6, 2017 · May 6, 2017
diff --git a/README.md b/README.md
@@ -30,7 +30,7 @@ firebase serve
 
 - That will build it all and watch the css, img, and js assets.
 - Then you can load up `http://localhost:5000` or `public/index.html` in a browser. narf!
-`/src/index.js` is the main file you'll want to edit for functionality.
+`/src/index.js`, `/src/css/style.scss`, and `/src/html/index.html` are the main files you'll want to edit for functionality.
 - If you have the [LiveReload Chrome extension](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei) installed, it should do live css updates in your browser while gulp watch is running
 - CSS is auto-prefixed for the supported browserslist, so don't manually add any browser prefixes to CSS src.
 - NOTE: If you change the UI, please update the screenshot at top of this README

diff --git a/gulpfile.js b/gulpfile.js
@@ -15,6 +15,7 @@ const cssnano = require('cssnano');
 const svgo = require('gulp-svgo');
 const sass = require('gulp-sass');
 const livereload = require('gulp-livereload');
+const htmlmin = require('gulp-htmlmin');
 
 // CONFIG
 // ============================================================
@@ -31,6 +32,12 @@ const opts = {
 
 const uglifyConf = {};
 
+const htmlminConfig = {
+  collapseWhitespace: true,
+  minifyCSS: true,
+  minifyJS: true
+};
+
 // TASKS
 // ============================================================
 
@@ -123,6 +130,21 @@ imgWatcher.on('change', event => {
   console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
 });
 
+// HTML
+// ============================================================
+
+gulp.task('html', () => {
+  return gulp.src('./src/html/*.html')
+    .pipe(htmlmin(htmlminConfig))
+    .pipe(gulp.dest('./public/')); // Output goes to root of /public, as per firebase hosting
+});
+
+const htmlWatcher = gulp.watch('src/html/*.html', ['html']);
+
+htmlWatcher.on('change', event => {
+  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
+});
+
 // BUILD
 // ============================================================
 

diff --git a/package.json b/package.json
@@ -48,6 +48,7 @@
     "babelify": "^7.3.0",
     "cssnano": "^3.10.0",
     "gulp": "^3.9.1",
+    "gulp-htmlmin": "^3.0.0",
     "gulp-postcss": "^6.4.0",
     "gulp-sourcemaps": "^2.5.1",
     "gulp-uglify": "^2.1.2",
@@ -66,6 +67,7 @@
     "babel-preset-latest": "^6.24.1",
     "browserify": "^14.1.0",
     "chai": "^3.5.0",
+    "gulp-htmlmin": "^3.0.0",
     "gulp-livereload": "^3.8.1",
     "gulp-sass": "^3.1.0",
     "gulp-svgo": "^1.0.3",

diff --git a/public/404.html b/public/404.html
@@ -1,33 +1 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Page Not Found</title>
-
-    <style media="screen">
-      body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
-      #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
-      #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
-      #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
-      #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
-      #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
-      #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
-      #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
-      #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
-      @media (max-width: 600px) {
-        body, #message { margin-top: 0; background: white; box-shadow: none; }
-        body { border-top: 16px solid #ffa100; }
-      }
-    </style>
-  </head>
-  <body>
-    <div id="message">
-      <h2>404</h2>
-      <h1>Page Not Found</h1>
-      <p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
-      <h3>Why am I seeing this?</h3>
-      <p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
-    </div>
-  </body>
-</html>
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Page Not Found</title><style media="screen">body{background:#eceff1;color:rgba(0,0,0,.87);font-family:Roboto,Helvetica,Arial,sans-serif;margin:0;padding:0}#message{background:#fff;max-width:360px;margin:100px auto 16px;padding:32px 24px 16px;border-radius:3px}#message h3{color:#888;font-weight:400;font-size:16px;margin:16px 0 12px}#message h2{color:#ffa100;font-weight:700;font-size:16px;margin:0 0 8px}#message h1{font-size:22px;font-weight:300;color:rgba(0,0,0,.6);margin:0 0 16px}#message p{line-height:140%;margin:16px 0 24px;font-size:14px}#message a{display:block;text-align:center;background:#039be5;text-transform:uppercase;text-decoration:none;color:#fff;padding:16px;border-radius:4px}#message,#message a{box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}#load{color:rgba(0,0,0,.4);text-align:center;font-size:13px}@media (max-width:600px){#message,body{margin-top:0;background:#fff;box-shadow:none}body{border-top:16px solid #ffa100}}</style></head><body><div id="message"><h2>404</h2><h1>Page Not Found</h1><p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p><h3>Why am I seeing this?</h3><p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p></div></body></html>
diff --git a/public/dist/css/min.min.css b/public/dist/css/min.min.css
diff --git a/public/dist/css/style.css b/public/dist/css/style.css
diff --git a/public/dist/js/bundle.min.js b/public/dist/js/bundle.min.js
diff --git a/public/dist/js/bundle.min.js.map b/public/dist/js/bundle.min.js.map