Basic setup - gulp + webpack + hugo
This commit is contained in:
Mathias Biilmann Christensen
commit
8f6c70c51b
|
|
@ -0,0 +1,2 @@
|
||||||
|
node_modules/
|
||||||
|
dist/
|
||||||
|
|
@ -0,0 +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';
|
||||||
|
|
||||||
|
|
||||||
|
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
|
||||||
|
}));
|
||||||
|
cb();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('build', ['webpack', 'hugo']);
|
||||||
|
|
||||||
|
gulp.task('server', ['build'], (cb) => {
|
||||||
|
gulp.watch('site/**', ['hugo']);
|
||||||
|
|
||||||
|
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: 'http://localhost:3009/',
|
||||||
|
stats: {
|
||||||
|
colors: true
|
||||||
|
},
|
||||||
|
hot: false
|
||||||
|
}).listen(3009, 'localhost', function(err) {
|
||||||
|
if(err) throw new gutil.PluginError('webpack-dev-server', err);
|
||||||
|
gutil.log('[webpack-dev-server]', 'http://localhost:3009/');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
{
|
||||||
|
"name": "hugo-gulp-boilerplate",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "Boilerplate for using hugo with gulp",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"hugo": "gulp hugo",
|
||||||
|
"webpack": "gulp webpack",
|
||||||
|
"build": "gulp build",
|
||||||
|
"start": "gulp server"
|
||||||
|
},
|
||||||
|
"author": "",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"autoprefixer": "^6.3.7",
|
||||||
|
"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",
|
||||||
|
"css-loader": "^0.23.1",
|
||||||
|
"file-loader": "^0.9.0",
|
||||||
|
"gulp": "^3.9.1",
|
||||||
|
"gulp-babel": "^6.1.2",
|
||||||
|
"postcss-cssnext": "^2.7.0",
|
||||||
|
"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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
baseurl = "/"
|
||||||
|
languageCode = "en-us"
|
||||||
|
title = "My New Hugo Site"
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
<!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>
|
||||||
|
|
||||||
|
<script src="/app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
body {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
import "../css/main.css";
|
||||||
|
|
||||||
|
// JS here
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
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]'
|
||||||
|
},
|
||||||
|
{ test: /\.json$/, loader: 'json-loader' },
|
||||||
|
{
|
||||||
|
test: /\.css$/,
|
||||||
|
loader: 'style!css?modules!postcss'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
loader: 'babel',
|
||||||
|
test: /\.js?$/,
|
||||||
|
exclude: /node_modules/,
|
||||||
|
query: {
|
||||||
|
cacheDirectory: true,
|
||||||
|
presets: ['react', 'es2015'],
|
||||||
|
plugins: ['transform-class-properties', 'transform-object-assign', 'transform-object-rest-spread']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
postcss: [
|
||||||
|
require('postcss-cssnext')
|
||||||
|
],
|
||||||
|
|
||||||
|
plugins: [
|
||||||
|
new webpack.ProvidePlugin({
|
||||||
|
'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
|
||||||
|
})
|
||||||
|
],
|
||||||
|
|
||||||
|
context: path.join(__dirname, 'src'),
|
||||||
|
entry: {
|
||||||
|
app: ['./js/app'],
|
||||||
|
},
|
||||||
|
output: {
|
||||||
|
path: path.join(__dirname, 'dist'),
|
||||||
|
publicPath: '/',
|
||||||
|
filename: '[name].js'
|
||||||
|
},
|
||||||
|
externals: [/^vendor\/.+\.js$/]
|
||||||
|
};
|
||||||
Reference in New Issue