User browserSync instead of webpack dev server

.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

gulpfile.babel.js

@@ -1,61 +1,54 @@
-import gulp from 'gulp';
+import gulp from "gulp";
-import babel from 'gulp-babel';
+import cp from "child_process";
-import cp from 'child_process';
+import gutil from "gulp-util";
-import gutil from 'gulp-util';
+import postcss from "gulp-postcss";
-import webpack from 'webpack';
+import cssImport from "postcss-import";
-import webpackConfig from './webpack.conf';
+import cssnext from "postcss-cssnext";
-import WebpackDevServer from 'webpack-dev-server';
+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) => {
+gulp.task("hugo", (cb) => {
-  const args = ['-d', '../dist', '-s', 'site'];
+  const args = ["-d", "../dist", "-s", "site", "-v"];
-  return cp.spawn('hugo', args, {stdio: 'inherit'}).on('close', cb);
+  return cp.spawn(hugoBin, args, {stdio: "inherit"}).on("close", () => {
-});
+    browserSync.reload();
-
-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
-    }));
     cb();
   });
 });
 
-gulp.task('build', ['webpack', 'hugo']);
+gulp.task("build", ["css", "js", "hugo"]);
 
-gulp.task('server', ['build'], (cb) => {
+gulp.task("css", () => (
-  gulp.watch('site/**', ['hugo']);
+  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) {
+  webpack(myConfig, (err, stats) => {
-    myConfig.entry[key].unshift("webpack-dev-server/client?http://localhost:3009/");
+    if (err) throw new gutil.PluginError("webpack", err);
-  }
+    gutil.log("[webpack]", stats.toString({
-
+      colors: true,
-  // Start a webpack-dev-server
+      progress: true
-	new WebpackDevServer(webpack(myConfig), {
+    }));
-    contentBase: './dist',
+    browserSync.reload();
-    publicPath: '/',
+    cb();
-		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/');
   });
 });
+
+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"]);
+});

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"
   }
 }

site/layouts/index.html

@@ -1,12 +1,5 @@
-<!doctype html>
+{{ partial "header" . }}
-<html>
+
-  <head>
-    <title>Hugo with Gulp and Webpack</title>
-    <link rel="stylesheet" href="/main.css"/>
-  </head>
-  <body>
 <h1>Hugo with Gulp and Webpack</h1>
 
-    <script src="/app.js"></script>
+{{ partial "footer" . }}
-  </body>
-</html>

site/layouts/partials/footer.html

@@ -0,0 +1,3 @@
+<script src="/app.js"></script>
+</body>
+</html>

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>

src/js/app.js

@@ -1,3 +1 @@
-import "../css/main.css";
+// JS Goes here - ES6 supported
-
-// JS here

webpack.conf.js

@@ -1,21 +1,16 @@
-import webpack from 'webpack';
+import webpack from "webpack";
-import path from 'path';
+import path from "path";
-import ExtractTextPlugin from "extract-text-webpack-plugin";
 
 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: "babel",
-        loader: ExtractTextPlugin.extract("style", "css?importLoaders=1!postcss")
-      },
-      {
-        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'
+      "fetch": "imports?this=>global!exports?global.fetch!whatwg-fetch"
-    }),
+    })
-    new ExtractTextPlugin("main.css")
   ],
 
-  context: path.join(__dirname, 'src'),
+  context: path.join(__dirname, "src"),
   entry: {
-    app: ['./js/app'],
+    app: ["./js/app"]
   },
   output: {
-    path: path.join(__dirname, 'dist'),
+    path: path.join(__dirname, "dist"),
-    publicPath: '/',
+    publicPath: "/",
-    filename: '[name].js'
+    filename: "[name].js"
   },
   externals:  [/^vendor\/.+\.js$/]
 };