diff --git a/README.md b/README.md index 6c26b83..d09dfb1 100644 --- a/README.md +++ b/README.md @@ -67,6 +67,20 @@ You can use ES6 and use both relative imports or import libraries from npm. Any CSS file directly under the `src/css/` folder will get compiled with [PostCSS Next](http://cssnext.io/) to `/dist/css/{filename}.css`. Import statements will be resolved as part of the build +## Environment variables + +Two seperate the development and production *- aka build -* stages, all gulp +tasks run with a node environment variable named either `development` or +`production`. + +You can access the environment variable inside the theme files with +`getenv "NODE_ENV"`. See the following example for a conditional statement: + + {{ if eq (getenv "NODE_ENV") "development" }}You're in development!{{ end }} + +All tasks starting with *build* set the environment variable to `production` - +the other will set it to `development`. + ## Deploying to netlify - Push your clone to your own GitHub repository. diff --git a/gulpfile.babel.js b/gulpfile.babel.js index ccf48fc..d0f3cd0 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -1,6 +1,6 @@ import gulp from "gulp"; -import { spawn } from "child_process"; -import hugoBin from "hugo-bin" +import {spawn} from "child_process"; +import hugoBin from "hugo-bin"; import gutil from "gulp-util"; import postcss from "gulp-postcss"; import cssImport from "postcss-import"; @@ -10,14 +10,20 @@ import webpack from "webpack"; import webpackConfig from "./webpack.conf"; const browserSync = BrowserSync.create(); -const defaultArgs = ["-d", "../dist", "-s", "site", "-v"]; +// Hugo arguments +const hugoArgsDefault = ["-d", "../dist", "-s", "site", "-v"]; +const hugoArgsPreview = ["--buildDrafts", "--buildFuture"]; + +// Development tasks gulp.task("hugo", (cb) => buildSite(cb)); -gulp.task("hugo-preview", (cb) => buildSite(cb, ["--buildDrafts", "--buildFuture"])); +gulp.task("hugo-preview", (cb) => buildSite(cb, hugoArgsPreview)); -gulp.task("build", ["css", "js", "hugo"]); -gulp.task("build-preview", ["css", "js", "hugo-preview"]); +// Build/production tasks +gulp.task("build", ["css", "js"], (cb) => buildSite(cb, [], "production")); +gulp.task("build-preview", ["css", "js"], (cb) => buildSite(cb, hugoArgsPreview, "production")); +// Compile CSS with PostCSS gulp.task("css", () => ( gulp.src("./src/css/*.css") .pipe(postcss([cssImport({from: "./src/css/main.css"}), cssnext()])) @@ -25,6 +31,7 @@ gulp.task("css", () => ( .pipe(browserSync.stream()) )); +// Compile Javascript gulp.task("js", (cb) => { const myConfig = Object.assign({}, webpackConfig); @@ -39,6 +46,7 @@ gulp.task("js", (cb) => { }); }); +// Development server with browsersync gulp.task("server", ["hugo", "css", "js"], () => { browserSync.init({ server: { @@ -50,8 +58,13 @@ gulp.task("server", ["hugo", "css", "js"], () => { gulp.watch("./site/**/*", ["hugo"]); }); -function buildSite(cb, options) { - const args = options ? defaultArgs.concat(options) : defaultArgs; +/** + * Run hugo and build the site + */ +function buildSite(cb, options, environment = "development") { + const args = options ? hugoArgsDefault.concat(options) : hugoArgsDefault; + + process.env.NODE_ENV = environment; return spawn(hugoBin, args, {stdio: "inherit"}).on("close", (code) => { if (code === 0) {