diff --git a/gulpfile.js b/gulpfile.js
index 3e5365c..e231106 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,7 +1,9 @@
 const gulp = require('gulp');
+const util = require('gulp-util');
 const exec = require('child_process').exec;
 const rimraf = require('rimraf');
 
+const browsersync = require('browser-sync');
 const ghPages = require('gulp-gh-pages');
 
 const md5 = require("gulp-md5-plus");
@@ -22,14 +24,26 @@ const deployOptions = {
   branch: "master"
 };
 
-gulp.task("default", ['html']);
+gulp.task("default", ['serve']);
 
+// PHASE 1 - Setup
 gulp.task('setup', function(cb) {
+  if (util.env.production) {
     process.env.HUGO_ENV = 'PRD';
-    process.env.GULP = 'true';
-    rimraf(`${distPath}`, cb);
+  } else {
+    process.env.HUGO_ENV = 'DEV';
+  }
+  process.env.GULP = 'true';
+
+  util.log(`process.env.HUGO_ENV = '${process.env.HUGO_ENV}'`);
+  util.log(`process.env.GULP = '${process.env.GULP}'`);
+
+  rimraf(`${distPath}`, cb);
 });
 
+// PHASE 2 - Data Dependencies
+
+// PHASE 3 - Building
 gulp.task('hugo', ['setup'], function (cb) {
   exec('hugo -s ./site/ -v', function (err, stdout, stderr) {
     console.log(stdout);
@@ -41,14 +55,6 @@ gulp.task('hugo', ['setup'], function (cb) {
 gulp.task("css", ['hugo'], () => (
   gulp.src(`${distPath}/css/**/*.css`, {base: './'})
     .pipe(postcss([cssnext(), cssImport({from: `${distPath}/css/main.css`})]))
-    .pipe(cleanCSS())
-    .pipe(md5(10, `${distPath}/**/*.html`))
-    .pipe(gulp.dest('./'))
-));
-
-gulp.task("js", ['hugo'], () => (
-  gulp.src(`${distPath}/js/**/*.js`, {base: './'})
-    .pipe(md5(10, `${distPath}/**/*.html`))
     .pipe(gulp.dest('./'))
 ));
 
@@ -67,19 +73,44 @@ gulp.task('images', ['hugo'], () => (
   gulp.src(`${distPath}/images/game/icons/*`, {base: './'})
       .pipe(imageResize({ width: 48, height: 48, crop: true }))
       .pipe(gulp.dest('./')),
-  
+
   gulp.src(`${distPath}/images/screenshots/*`)
       .pipe(imageResize({ width: 400, height: 240, crop: false }))
       .pipe(gulp.dest(`${distPath}/images/screenshots/thumbs`))
 ));
 
-gulp.task('html', ['hugo', 'css', 'js', 'images'], () => (
+// This task ensures all phases up to PHASE 3 are completed.
+gulp.task('build', ['hugo', 'css', 'images']);
+
+// STAGE 4 - Optimization
+gulp.task('compress', ['build'], () => (
+  gulp.src(`${distPath}/js/**/*.js`, {base: './'})
+    .pipe(md5(10, `${distPath}/**/*.html`))
+    .pipe(gulp.dest('./')),
   gulp.src(`${distPath}/**/*.html`, {base: './'})
     .pipe(htmlmin({collapseWhitespace: true}))
+    .pipe(gulp.dest('./')),
+  gulp.src(`${distPath}/css/**/*.css`, {base: './'})
+    .pipe(cleanCSS())
+    .pipe(md5(10, `${distPath}/**/*.html`))
     .pipe(gulp.dest('./'))
 ));
 
-gulp.task('deploy', ['html'], () => {
+// STAGE 5 - Deploy
+
+// Used for Development
+gulp.task('serve', ['build'], () => {
+  // Serve files from the root of this project
+  browsersync({
+      server: {
+          baseDir: distPath
+      },
+      open: false
+  });
+});
+
+// Used for Production
+gulp.task('deploy', ['build', 'compress'], () => {
   require('fs').writeFileSync(`${distPath}/CNAME`, `${cname}`);
   require('fs').writeFileSync(`${distPath}/robots.txt`, `Sitemap: https://${cname}/sitemap.xml\n\nUser-agent: *`);
   return gulp.src(`${distPath}/**/*`).pipe(ghPages(deployOptions));
diff --git a/package.json b/package.json
index 3168db5..79bad86 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "author": "",
   "license": "GPLv3",
   "dependencies": {
+    "browser-sync": "^2.18.12",
     "gulp": "^3.9.1",
     "gulp-clean-css": "^3.0.3",
     "gulp-gh-pages": "^0.5.4",
@@ -13,6 +14,7 @@
     "gulp-md5-plus": "^0.2.5",
     "gulp-postcss": "^7.0.0",
     "gulp-rename": "^1.2.2",
+    "gulp-util": "^3.0.8",
     "postcss-cssnext": "^2.9.0",
     "postcss-import": "^8.2.0",
     "rimraf": "^2.6.1"