From 8f6c70c51bf7e9e2045ae13c4052156877e77648 Mon Sep 17 00:00:00 2001 From: Mathias Biilmann Christensen Date: Sun, 3 Jul 2016 15:07:47 -0700 Subject: [PATCH] Basic setup - gulp + webpack + hugo --- .babelrc | 3 +++ .gitignore | 2 ++ gulpfile.babel.js | 54 +++++++++++++++++++++++++++++++++++++++++ package.json | 33 +++++++++++++++++++++++++ site/archetypes/.keep | 0 site/config.toml | 3 +++ site/content/.keep | 0 site/data/.keep | 0 site/layouts/index.html | 12 +++++++++ site/static/.keep | 0 src/css/main.css | 3 +++ src/js/app.js | 3 +++ webpack.conf.js | 49 +++++++++++++++++++++++++++++++++++++ 13 files changed, 162 insertions(+) create mode 100644 .babelrc create mode 100644 .gitignore create mode 100644 gulpfile.babel.js create mode 100644 package.json create mode 100644 site/archetypes/.keep create mode 100644 site/config.toml create mode 100644 site/content/.keep create mode 100644 site/data/.keep create mode 100644 site/layouts/index.html create mode 100644 site/static/.keep create mode 100644 src/css/main.css create mode 100644 src/js/app.js create mode 100644 webpack.conf.js diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..c13c5f6 --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["es2015"] +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b947077 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules/ +dist/ diff --git a/gulpfile.babel.js b/gulpfile.babel.js new file mode 100644 index 0000000..5de71c9 --- /dev/null +++ b/gulpfile.babel.js @@ -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/'); + }); +}); diff --git a/package.json b/package.json new file mode 100644 index 0000000..29ddccd --- /dev/null +++ b/package.json @@ -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" + } +} diff --git a/site/archetypes/.keep b/site/archetypes/.keep new file mode 100644 index 0000000..e69de29 diff --git a/site/config.toml b/site/config.toml new file mode 100644 index 0000000..149e86a --- /dev/null +++ b/site/config.toml @@ -0,0 +1,3 @@ +baseurl = "/" +languageCode = "en-us" +title = "My New Hugo Site" diff --git a/site/content/.keep b/site/content/.keep new file mode 100644 index 0000000..e69de29 diff --git a/site/data/.keep b/site/data/.keep new file mode 100644 index 0000000..e69de29 diff --git a/site/layouts/index.html b/site/layouts/index.html new file mode 100644 index 0000000..ae10e35 --- /dev/null +++ b/site/layouts/index.html @@ -0,0 +1,12 @@ + + + + Hugo with Gulp and Webpack + + + +

Hugo with Gulp and Webpack

+ + + + diff --git a/site/static/.keep b/site/static/.keep new file mode 100644 index 0000000..e69de29 diff --git a/src/css/main.css b/src/css/main.css new file mode 100644 index 0000000..74d7658 --- /dev/null +++ b/src/css/main.css @@ -0,0 +1,3 @@ +body { + font-size: 16px; +} diff --git a/src/js/app.js b/src/js/app.js new file mode 100644 index 0000000..1374e08 --- /dev/null +++ b/src/js/app.js @@ -0,0 +1,3 @@ +import "../css/main.css"; + +// JS here diff --git a/webpack.conf.js b/webpack.conf.js new file mode 100644 index 0000000..a0e014b --- /dev/null +++ b/webpack.conf.js @@ -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$/] +};