User browserSync instead of webpack dev server
This commit is contained in:
parent
a6a5d841fd
commit
f85838665b
|
@ -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
|
|
@ -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/');
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
12
package.json
12
package.json
|
@ -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"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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" . }}
|
||||||
|
|
|
@ -0,0 +1,3 @@
|
||||||
|
<script src="/app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -0,0 +1,7 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Hugo with Gulp and Webpack</title>
|
||||||
|
<link rel="stylesheet" href="/main.css"/>
|
||||||
|
</head>
|
||||||
|
<body>
|
|
@ -1,3 +1 @@
|
||||||
import "../css/main.css";
|
// JS Goes here - ES6 supported
|
||||||
|
|
||||||
// JS here
|
|
||||||
|
|
|
@ -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$/]
|
||||||
};
|
};
|
||||||
|
|
Reference in New Issue