Merge pull request #38 from atomtigerzoo/env-variables

Environment variables

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.

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) {