Merge pull request #50 from PracticeJavaScript/updating

Updating

Author: spacerockzero

README.md

@@ -18,19 +18,16 @@
 
 ## How To Install Locally
 ```bash
-npm i -g pnpm # if you don't have pnpm yet
-pnpm i -g firebase-tools # if you don't have firebase-tools yet
-pnpm i -g gulp gulp-cli # if you don't have gulp yet
 git clone https://github.com/PracticeJavaScript/practicejavascript.com.git
 cd practicejavascript.com
-pnpm i
-gulp # watch is default gulp task
+npm i
+npm start # start gulp watch
 # Another tab
-firebase serve
+npm run serve # serves content out of /public dir
 ```
 
 - 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!
+- Then you can load up `http://localhost:8080` in a browser. narf!
 `/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.

gulpfile.js

@@ -20,7 +20,6 @@ const livereload = require('gulp-livereload');
 const htmlmin = require('gulp-htmlmin');
 const swPrecache = require('sw-precache');
 const image = require('gulp-image');
-const pump = require('pump');
 
 // CONFIG
 // ============================================================
@@ -35,7 +34,8 @@ const opts = {
   }
 };
 
-const uglifyConf = {};
+const prepackConfig = {};
+const uglifyConfig = {};
 
 const htmlminConfig = {
   collapseWhitespace: true,
@@ -50,6 +50,7 @@ const imageConfig = {
   jpegoptim: true
 };
 
+
 // TASKS
 // ============================================================
 
@@ -74,14 +75,15 @@ function compile(watch) {
       .pipe(sourcemaps.init({
         loadMaps: true
       }))
-      .pipe(uglify())
+      .pipe(uglify(uglifyConfig))
       .pipe(sourcemaps.write('./'))
       .pipe(gulp.dest('./public/dist/js'));
   }
   if (watch) {
     bundler.on('update', () => {
       console.log('-> bundling...');
       rebundle();
+      livereload();
       console.log('done bundling.');
     });
   }
@@ -92,6 +94,7 @@ function watch() {
   return compile(true);
 }
 
+
 // CSS
 // ============================================================
 
@@ -113,6 +116,7 @@ cssWatcher.on('change', event => {
   console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
 });
 
+
 // OTHER JS
 // ============================================================
 
@@ -121,7 +125,7 @@ gulp.task('js', () => {
     .pipe(sourcemaps.init({
       loadMaps: true
     }))
-    .pipe(uglify(uglifyConf))
+    .pipe(uglify(uglifyConfig))
     .pipe(sourcemaps.write('./'))
     .pipe(gulp.dest('./public/dist/js'));
 });
@@ -132,6 +136,7 @@ jsWatcher.on('change', event => {
   console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
 });
 
+
 // IMG
 // ============================================================
 
@@ -156,6 +161,7 @@ imgWatcher.on('change', event => {
   console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
 });
 
+
 // HTML
 // ============================================================
 
@@ -171,6 +177,7 @@ htmlWatcher.on('change', event => {
   console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
 });
 
+
 // SERVICE WORKER
 // ============================================================
 
@@ -191,7 +198,7 @@ gulp.task('optimize-service-worker', ['generate-service-worker'], () => {
     .pipe(sourcemaps.init({
       loadMaps: true
     }))
-    .pipe(uglify(uglifyConf))
+    .pipe(uglify(uglifyConfig))
     .pipe(sourcemaps.write('./'))
     .pipe(gulp.dest('./public'));
 });
@@ -205,6 +212,7 @@ swWatcher.on('change', event => {
   console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
 });
 
+
 // MANIFEST
 // ============================================================
 
@@ -219,6 +227,7 @@ manifestWatcher.on('change', event => {
   console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
 });
 
+
 // BUILD
 // ============================================================
 
@@ -234,4 +243,6 @@ function glob() {
   return 'typeof self !== "undefined" ? self : ' + 'typeof window !== "undefined" ? window : {}'; // eslint-disable-line no-useless-concat
 }
 
+
+// gulp.task('default', ['build', 'manifest', 'service-worker', 'watch']);
 gulp.task('default', ['build', 'manifest', 'service-worker', 'watch']);

package.json

@@ -8,8 +8,9 @@
   },
   "scripts": {
     "test": "",
+    "start": "./node_modules/.bin/gulp watch",
+    "serve": "./node_modules/.bin/http-server",
     "build": "./node_modules/.bin/gulp build",
-    "watch": "./node_modules/.bin/gulp watch",
     "precommit": "npm test",
     "prepush": "npm test"
   },
@@ -68,10 +69,10 @@
     "gulp-svgo": "^1.0.3",
     "gulp-uglify": "^3.0.0",
     "gulp-util": "^3.0.8",
+    "http-server": "^0.10.0",
     "husky": "^0.13.3",
     "lint-staged": "^3.4.0",
     "localforage": "^1.5.0",
-    "pump": "^1.0.2",
     "rollup-stream": "^1.19.0",
     "sw-precache": "^5.1.1",
     "uglify-es": "^3.0.15",