Merge pull request #38 from atomtigerzoo/env-variables

Environment variables
This commit is contained in:
David Calavera 2017-08-10 08:16:29 -07:00 committed by GitHub
commit 7b6ba9aeae
2 changed files with 35 additions and 8 deletions

View File

@ -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.

View File

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