User browserSync instead of webpack dev server

This commit is contained in:
Mathias Biilmann Christensen 2016-07-21 10:33:50 -07:00
parent a6a5d841fd
commit f85838665b
9 changed files with 179 additions and 90 deletions

101
.eslintrc Normal file
View File

@ -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

View File

@ -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(); 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); 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, gulp.task("server", ["hugo", "css", "js"], () => {
proxy: { browserSync.init({
"/confirm/*": { server: {
bypass: function(req, res, proxyOptions) { baseDir: "./dist"
return "/pages/confirm/index.html"; }
} });
} gulp.watch("./src/js/**/*.js", ["js"]);
} gulp.watch("./src/css/**/*.css", ["css"]);
}).listen(3009, 'localhost', function(err) { gulp.watch("./site/**/*", ["hugo"]);
if(err) throw new gutil.PluginError('webpack-dev-server', err);
gutil.log('[webpack-dev-server]', 'http://localhost:3009/');
});
}); });

View File

@ -7,30 +7,34 @@
"hugo": "gulp hugo", "hugo": "gulp hugo",
"webpack": "gulp webpack", "webpack": "gulp webpack",
"build": "gulp build", "build": "gulp build",
"start": "gulp server" "start": "gulp server",
"lint": "eslint src"
}, },
"author": "", "author": "",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"autoprefixer": "^6.3.7", "autoprefixer": "^6.3.7",
"babel-eslint": "^6.1.2",
"babel-loader": "^6.2.4", "babel-loader": "^6.2.4",
"babel-plugin-transform-class-properties": "^6.10.2", "babel-plugin-transform-class-properties": "^6.10.2",
"babel-plugin-transform-object-assign": "^6.8.0", "babel-plugin-transform-object-assign": "^6.8.0",
"babel-plugin-transform-object-rest-spread": "^6.8.0", "babel-plugin-transform-object-rest-spread": "^6.8.0",
"babel-preset-es2015": "^6.9.0", "babel-preset-es2015": "^6.9.0",
"browser-sync": "^2.13.0",
"css-loader": "^0.23.1", "css-loader": "^0.23.1",
"eslint": "^3.1.1",
"eslint-plugin-import": "^1.11.1",
"exports-loader": "^0.6.3", "exports-loader": "^0.6.3",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0", "file-loader": "^0.9.0",
"gulp": "^3.9.1", "gulp": "^3.9.1",
"gulp-babel": "^6.1.2", "gulp-babel": "^6.1.2",
"gulp-postcss": "^6.1.1",
"imports-loader": "^0.6.5", "imports-loader": "^0.6.5",
"postcss-cssnext": "^2.7.0", "postcss-cssnext": "^2.7.0",
"postcss-import": "^8.1.2",
"postcss-loader": "^0.9.1", "postcss-loader": "^0.9.1",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7", "url-loader": "^0.5.7",
"webpack": "^1.13.1", "webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1",
"whatwg-fetch": "^1.0.0" "whatwg-fetch": "^1.0.0"
} }
} }

View File

View File

@ -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> <h1>Hugo with Gulp and Webpack</h1>
</body>
</html> {{ partial "footer" . }}

View File

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

View File

@ -0,0 +1,7 @@
<!doctype html>
<html>
<head>
<title>Hugo with Gulp and Webpack</title>
<link rel="stylesheet" href="/main.css"/>
</head>
<body>

View File

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

View File

@ -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 { export default {
module: { module: {
loaders: [ loaders: [
{ {
test: /\.((png)|(eot)|(woff)|(woff2)|(ttf)|(svg)|(gif))(\?v=\d+\.\d+\.\d+)?$/, 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?$/, test: /\.js?$/,
exclude: /node_modules/, exclude: /node_modules/,
query: {cacheDirectory: true} query: {cacheDirectory: true}
@ -23,25 +18,20 @@ export default {
] ]
}, },
postcss: [
require('postcss-cssnext')
],
plugins: [ plugins: [
new webpack.ProvidePlugin({ 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: { entry: {
app: ['./js/app'], app: ["./js/app"]
}, },
output: { output: {
path: path.join(__dirname, 'dist'), path: path.join(__dirname, "dist"),
publicPath: '/', publicPath: "/",
filename: '[name].js' filename: "[name].js"
}, },
externals: [/^vendor\/.+\.js$/] externals: [/^vendor\/.+\.js$/]
}; };