Basic setup - gulp + webpack + hugo

This commit is contained in:
Mathias Biilmann Christensen 2016-07-03 15:07:47 -07:00
commit 8f6c70c51b
13 changed files with 162 additions and 0 deletions

3
.babelrc Normal file
View File

@ -0,0 +1,3 @@
{
"presets": ["es2015"]
}

2
.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
node_modules/
dist/

54
gulpfile.babel.js Normal file
View File

@ -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/');
});
});

33
package.json Normal file
View File

@ -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
site/archetypes/.keep Normal file
View File

3
site/config.toml Normal file
View File

@ -0,0 +1,3 @@
baseurl = "/"
languageCode = "en-us"
title = "My New Hugo Site"

0
site/content/.keep Normal file
View File

0
site/data/.keep Normal file
View File

12
site/layouts/index.html Normal file
View File

@ -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
site/static/.keep Normal file
View File

3
src/css/main.css Normal file
View File

@ -0,0 +1,3 @@
body {
font-size: 16px;
}

3
src/js/app.js Normal file
View File

@ -0,0 +1,3 @@
import "../css/main.css";
// JS here

49
webpack.conf.js Normal file
View File

@ -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$/]
};