From f85838665b07e62c79a56a6956f9a5c7d9a70ced Mon Sep 17 00:00:00 2001
From: Mathias Biilmann Christensen <info@mathias-biilmann.net>
Date: Thu, 21 Jul 2016 10:33:50 -0700
Subject: [PATCH] User browserSync instead of webpack dev server

---
 .eslintrc                         | 101 ++++++++++++++++++++++++++++++
 gulpfile.babel.js                 |  93 +++++++++++++--------------
 package.json                      |  12 ++--
 site/archetypes/.keep             |   0
 site/layouts/index.html           |  15 ++---
 site/layouts/partials/footer.html |   3 +
 site/layouts/partials/header.html |   7 +++
 src/js/app.js                     |   4 +-
 webpack.conf.js                   |  34 ++++------
 9 files changed, 179 insertions(+), 90 deletions(-)
 create mode 100644 .eslintrc
 delete mode 100644 site/archetypes/.keep
 create mode 100644 site/layouts/partials/footer.html
 create mode 100644 site/layouts/partials/header.html

diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 0000000..e1b082e
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,101 @@
+env:
+  browser: true
+
+parser: babel-eslint
+
+plugins: [ "import" ]
+
+# enable ECMAScript features
+ecmaFeatures:
+  arrowFunctions: true
+  binaryLiterals: true
+  blockBindings: true
+  classes: true
+  defaultParams: true
+  destructuring: true
+  forOf: true
+  generators: true
+  jsx: true
+  modules: true
+  objectLiteralShorthandMethods: true
+  objectLiteralShorthandProperties: true
+  octalLiterals: true
+  spread: true
+  templateStrings: true
+
+rules:
+  # Possible Errors
+  # https://github.com/eslint/eslint/tree/master/docs/rules#possible-errors
+  no-control-regex: 2
+  no-console: 1
+  no-debugger: 2
+  no-dupe-args: 2
+  no-dupe-keys: 2
+  no-duplicate-case: 2
+  no-empty-character-class: 2
+  no-ex-assign: 2
+  no-extra-boolean-cast : 2
+  no-extra-semi: 2
+  no-invalid-regexp: 2
+  no-irregular-whitespace: 1
+  no-proto: 2
+  no-unexpected-multiline: 2
+  no-unreachable: 2
+  valid-typeof: 2
+
+  # Best Practices
+  # https://github.com/eslint/eslint/tree/master/docs/rules#best-practices
+  no-fallthrough: 2
+  no-redeclare: 2
+
+  # Stylistic Issues
+  # https://github.com/eslint/eslint/tree/master/docs/rules#stylistic-issues
+  comma-spacing: 2
+  eol-last: 2
+  eqeqeq: ["error", "smart"]
+  indent: [2, 2, {SwitchCase: 1}]
+  keyword-spacing: 2
+  max-len: [1, 160, 2]
+  new-parens: 2
+  no-mixed-spaces-and-tabs: 2
+  no-multiple-empty-lines: [2, {max: 2}]
+  no-trailing-spaces: 2
+  object-curly-spacing: [2, "never"]
+  quotes: [2, "double", "avoid-escape"]
+  semi: 2
+  space-before-blocks: [2, "always"]
+  space-before-function-paren: [2, "never"]
+  space-in-parens: [2, "never"]
+  space-infix-ops: 2
+  space-unary-ops: 2
+
+  # ECMAScript 6
+  # http://eslint.org/docs/rules/#ecmascript-6
+  arrow-parens: [2, "always"]
+  arrow-spacing: [2, {"before": true, "after": true}]
+  no-confusing-arrow: 2
+  prefer-const: 2
+
+  # JSX
+  jsx-quotes: [2, "prefer-double"]
+
+  # Import
+  import/no-unresolved: [1, {"commonjs": true, "amd": true}]
+  import/export: 2
+
+  # Strict Mode
+  # https://github.com/eslint/eslint/tree/master/docs/rules#strict-mode
+  strict: [2, "global"]
+
+  # Variables
+  # https://github.com/eslint/eslint/tree/master/docs/rules#variables
+  no-undef: 2
+  no-unused-vars: [2, {"args": "none"}]
+
+# Global scoped method and vars
+globals:
+  __dirname: true
+  require: true
+  process: true
+  ENV: true
+  module: true
diff --git a/gulpfile.babel.js b/gulpfile.babel.js
index bb0e8b5..d15346f 100644
--- a/gulpfile.babel.js
+++ b/gulpfile.babel.js
@@ -1,61 +1,54 @@
-import gulp from 'gulp';
-import babel from 'gulp-babel';
-import cp from 'child_process';
-import gutil from 'gulp-util';
-import webpack from 'webpack';
-import webpackConfig from './webpack.conf';
-import WebpackDevServer from 'webpack-dev-server';
+import gulp from "gulp";
+import cp from "child_process";
+import gutil from "gulp-util";
+import postcss from "gulp-postcss";
+import cssImport from "postcss-import";
+import cssnext from "postcss-cssnext";
+import BrowserSync from "browser-sync";
+import webpack from "webpack";
+import webpackConfig from "./webpack.conf";
 
+const browserSync = BrowserSync.create();
+const hugoBin = "hugo";
 
-gulp.task('hugo', (cb) => {
-  const args = ['-d', '../dist', '-s', 'site'];
-  return cp.spawn('hugo', args, {stdio: 'inherit'}).on('close', cb);
-});
-
-gulp.task('webpack', (cb) => {
-  const myConfig = Object.assign({}, webpackConfig);
-
-  // run webpack
-  webpack(myConfig, (err, stats) => {
-    if (err) throw new gutil.PluginError('webpack', err);
-    gutil.log('[webpack]', stats.toString({
-      colors: true,
-      progress: true
-    }));
+gulp.task("hugo", (cb) => {
+  const args = ["-d", "../dist", "-s", "site", "-v"];
+  return cp.spawn(hugoBin, args, {stdio: "inherit"}).on("close", () => {
+    browserSync.reload();
     cb();
   });
 });
 
-gulp.task('build', ['webpack', 'hugo']);
+gulp.task("build", ["css", "js", "hugo"]);
 
-gulp.task('server', ['build'], (cb) => {
-  gulp.watch('site/**', ['hugo']);
+gulp.task("css", () => (
+  gulp.src("./src/css/*.css")
+    .pipe(postcss([cssnext(), cssImport({from: "./src/css/main.css"})]))
+    .pipe(gulp.dest("./dist"))
+    .pipe(browserSync.stream())
+));
 
+gulp.task("js", (cb) => {
   const myConfig = Object.assign({}, webpackConfig);
-	myConfig.devtool = 'cheap-module-eval-source-map';
-	myConfig.debug = true;
 
-  for (const key in myConfig.entry) {
-    myConfig.entry[key].unshift("webpack-dev-server/client?http://localhost:3009/");
-  }
-
-  // Start a webpack-dev-server
-	new WebpackDevServer(webpack(myConfig), {
-    contentBase: './dist',
-    publicPath: '/',
-		stats: {
-			colors: true
-		},
-		hot: false,
-    proxy: {
-      "/confirm/*": {
-        bypass: function(req, res, proxyOptions) {
-          return "/pages/confirm/index.html";
-        }
-      }
-    }
-	}).listen(3009, 'localhost', function(err) {
-		if(err) throw new gutil.PluginError('webpack-dev-server', err);
-		gutil.log('[webpack-dev-server]', 'http://localhost:3009/');
-	});
+  webpack(myConfig, (err, stats) => {
+    if (err) throw new gutil.PluginError("webpack", err);
+    gutil.log("[webpack]", stats.toString({
+      colors: true,
+      progress: true
+    }));
+    browserSync.reload();
+    cb();
+  });
+});
+
+gulp.task("server", ["hugo", "css", "js"], () => {
+  browserSync.init({
+    server: {
+      baseDir: "./dist"
+    }
+  });
+  gulp.watch("./src/js/**/*.js", ["js"]);
+  gulp.watch("./src/css/**/*.css", ["css"]);
+  gulp.watch("./site/**/*", ["hugo"]);
 });
diff --git a/package.json b/package.json
index f8a2b37..292bdfd 100644
--- a/package.json
+++ b/package.json
@@ -7,30 +7,34 @@
     "hugo": "gulp hugo",
     "webpack": "gulp webpack",
     "build": "gulp build",
-    "start": "gulp server"
+    "start": "gulp server",
+    "lint": "eslint src"
   },
   "author": "",
   "license": "MIT",
   "dependencies": {
     "autoprefixer": "^6.3.7",
+    "babel-eslint": "^6.1.2",
     "babel-loader": "^6.2.4",
     "babel-plugin-transform-class-properties": "^6.10.2",
     "babel-plugin-transform-object-assign": "^6.8.0",
     "babel-plugin-transform-object-rest-spread": "^6.8.0",
     "babel-preset-es2015": "^6.9.0",
+    "browser-sync": "^2.13.0",
     "css-loader": "^0.23.1",
+    "eslint": "^3.1.1",
+    "eslint-plugin-import": "^1.11.1",
     "exports-loader": "^0.6.3",
-    "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.9.0",
     "gulp": "^3.9.1",
     "gulp-babel": "^6.1.2",
+    "gulp-postcss": "^6.1.1",
     "imports-loader": "^0.6.5",
     "postcss-cssnext": "^2.7.0",
+    "postcss-import": "^8.1.2",
     "postcss-loader": "^0.9.1",
-    "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
     "webpack": "^1.13.1",
-    "webpack-dev-server": "^1.14.1",
     "whatwg-fetch": "^1.0.0"
   }
 }
diff --git a/site/archetypes/.keep b/site/archetypes/.keep
deleted file mode 100644
index e69de29..0000000
diff --git a/site/layouts/index.html b/site/layouts/index.html
index ae10e35..7266783 100644
--- a/site/layouts/index.html
+++ b/site/layouts/index.html
@@ -1,12 +1,5 @@
-<!doctype html>
-<html>
-  <head>
-    <title>Hugo with Gulp and Webpack</title>
-    <link rel="stylesheet" href="/main.css"/>
-  </head>
-  <body>
-    <h1>Hugo with Gulp and Webpack</h1>
+{{ partial "header" . }}
 
-    <script src="/app.js"></script>
-  </body>
-</html>
+<h1>Hugo with Gulp and Webpack</h1>
+
+{{ partial "footer" . }}
diff --git a/site/layouts/partials/footer.html b/site/layouts/partials/footer.html
new file mode 100644
index 0000000..310a610
--- /dev/null
+++ b/site/layouts/partials/footer.html
@@ -0,0 +1,3 @@
+<script src="/app.js"></script>
+</body>
+</html>
diff --git a/site/layouts/partials/header.html b/site/layouts/partials/header.html
new file mode 100644
index 0000000..c683ad3
--- /dev/null
+++ b/site/layouts/partials/header.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Hugo with Gulp and Webpack</title>
+    <link rel="stylesheet" href="/main.css"/>
+  </head>
+  <body>
diff --git a/src/js/app.js b/src/js/app.js
index 1374e08..6fbb399 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -1,3 +1 @@
-import "../css/main.css";
-
-// JS here
+// JS Goes here - ES6 supported
diff --git a/webpack.conf.js b/webpack.conf.js
index 399c2d3..8cc81c6 100644
--- a/webpack.conf.js
+++ b/webpack.conf.js
@@ -1,21 +1,16 @@
-import webpack from 'webpack';
-import path from 'path';
-import ExtractTextPlugin from "extract-text-webpack-plugin";
+import webpack from "webpack";
+import path from "path";
 
 export default {
   module: {
     loaders: [
       {
         test: /\.((png)|(eot)|(woff)|(woff2)|(ttf)|(svg)|(gif))(\?v=\d+\.\d+\.\d+)?$/,
-        loader: 'file?name=/[hash].[ext]'
+        loader: "file?name=/[hash].[ext]"
       },
-      { test: /\.json$/, loader: 'json-loader' },
+      {test: /\.json$/, loader: "json-loader"},
       {
-        test: /\.css$/,
-        loader: ExtractTextPlugin.extract("style", "css?importLoaders=1!postcss")
-      },
-      {
-        loader: 'babel',
+        loader: "babel",
         test: /\.js?$/,
         exclude: /node_modules/,
         query: {cacheDirectory: true}
@@ -23,25 +18,20 @@ export default {
     ]
   },
 
-  postcss: [
-    require('postcss-cssnext')
-  ],
-
   plugins: [
     new webpack.ProvidePlugin({
-      'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
-    }),
-    new ExtractTextPlugin("main.css")
+      "fetch": "imports?this=>global!exports?global.fetch!whatwg-fetch"
+    })
   ],
 
-  context: path.join(__dirname, 'src'),
+  context: path.join(__dirname, "src"),
   entry: {
-    app: ['./js/app'],
+    app: ["./js/app"]
   },
   output: {
-    path: path.join(__dirname, 'dist'),
-    publicPath: '/',
-    filename: '[name].js'
+    path: path.join(__dirname, "dist"),
+    publicPath: "/",
+    filename: "[name].js"
   },
   externals:  [/^vendor\/.+\.js$/]
 };