Statix v4 – DO NOT MERGE

.editorconfig

@@ -15,3 +15,6 @@ trim_trailing_whitespace = false
 
 [*.yml]
 indent_style = space
+
+[*.json]
+indent_style = space

.gitattributes

@@ -1 +1,4 @@
 * text=auto
+
+# Don't diff or textually merge source maps
+*.map   binary

.gitignore

@@ -5,43 +5,26 @@
 
 # Comment these if we are building js/Sass on the server
 assets/dist/**/*
-assets/temp/**/*
 **/*.map
 
 
-# CSS & Sass
-# css/*.css
-.sass-cache/
-*.scssc
-
-
 # Dependencies
- # Bower dependencies directory. comment this line to commit them.
-bower_modules/*
- # Node modules directory. comment this line to commit them.
+# - Node modules directory. comment this line to commit them.
 node_modules/*
-logs
-*.log
-
-
-# Tooling
-# Photobox visual regression testing
-photobox/
-# Generated test files
-testing/
-
-
-# Sublime Text project files
-*.sublime-*
-# Jekyll compilation directory
-_site/
 
 
-# OS generated files
-.DS_Store
-.DS_Store?
+# OS or Editor folders
 ._*
-.Spotlight-V100
-.Trashes
-ehthumbs.db
+.cache
+.DS_Store
+.idea
+.project
+.settings
+.tmproj
+*.esproj
+*.sublime-*
+.vscode
+nbproject
 Thumbs.db
+logs
+*.log

.kickoff/config.js

@@ -0,0 +1,120 @@
+/**
+ * Global build task vars
+ * Both Webpack and Gulp use these vars. Change as much as you like :)
+ */
+const pkg = require('../package');
+const gutil = require('gulp-util');
+
+const ConfigOptions = function () {
+	const config = this;
+
+	config.srcDir = './assets/src'; // config.srcDir
+	config.distDir = './assets/dist'; // config.distDir
+
+	// CSS-related vars
+	config.css = {
+		scssDir: `${config.srcDir}/scss`, // config.css.scssDir
+		distDir: `${config.distDir}/css`, // config.css.distDir
+
+		distFile: 'kickoff', // config.css.distFile
+		// Renaming this changes the name of the generated CSS file
+		// Make sure you update your template file
+
+		browsers: ['> 5%', 'last 2 versions', 'ie > 8'], // config.css.browsers
+		// We are supporting the last 2 browsers, any browsers with >5% market share,
+		// and ensuring we support IE9+ with prefixes
+	};
+
+	// Javascript-related vars
+	config.js = {
+		srcDir: `${config.srcDir}/js`, // config.js.srcDir
+		srcFile: 'script.js', // config.js.srcFile
+
+		entryPoints: {
+			kickoff: [`${this.srcDir}/js/script.js`],
+			styleguide: [`${this.srcDir}/js/styleguide.js`],
+
+			// Create more entry-points by adding to this array, e.g.
+			// foo: [`${this.srcDir}/js/bar.js`],
+		},
+
+		distDir: `${config.distDir}/js`, // config.js.distDir
+		distFile: 'kickoff.js', // config.js.distFile
+		// Renaming this changes the name of the generated JS file
+		// Make sure you update your template file
+	};
+
+	// Image-related vars
+	config.img = {
+		srcDir: `${config.srcDir}/img`, // config.img.srcDir
+		distDir: `${config.distDir}/img`, // config.img.distDir
+	};
+
+	// SVG-related vars
+	config.svg = {
+		srcDir: `${config.srcDir}/svg`, // config.svg.srcDir
+		distDir: `${config.distDir}/svg`, // config.svg.distDir
+	};
+
+	// Webfont-related vars - unused by default
+	config.fonts = {
+		srcDir: `${config.srcDir}/fonts`, // config.fonts.srcDir
+		distDir: `${config.distDir}/fonts`, // config.fonts.distDir
+	};
+
+	config.gulp = {
+		// Reports which file was changed
+		onChange : function(evt) {
+				gutil.log( gutil.colors.cyan.bold('❯❯ File: ' + evt.path.replace(new RegExp('/.*(?=/' + config.srcDir.substr(2) + ')/'), '')), 'was', gutil.colors.magenta(evt.type) );
+		},
+		onError : function (err) {
+				gutil.beep();
+				gutil.log();
+				gutil.log( gutil.colors.red.bold('-----------------------------------------------------------------------') );
+				gutil.log( gutil.colors.red.bold(err) );
+
+				if (gutil.env.prod && err.status === 1) {
+						process.exit(1);
+				}
+
+				this.emit('end');
+		}
+	};
+
+	config.statix = {
+		dir: 'statix', // <%= config.statix.dir%>
+		srcDir: '/src',
+		distDir: '/dist',
+
+		assetsDir: '/dist/assets',
+		cssDir: '/css',
+		jsDir: '/js',
+		imgDir: '/img',
+		svgDir: '/svg',
+		fontsDir: '/fonts',
+
+		dataDir: '/data',
+		helpersDir: '/helpers',
+		templateDir: '/templates',
+
+		isProd: (gutil.env.prod ? true : false)
+	}
+
+	// Banners and info
+	config.misc = {
+		banner: `/**
+ * ██╗  ██╗██╗ ██████╗██╗  ██╗ ██████╗ ███████╗███████╗
+ * ██║ ██╔╝██║██╔════╝██║ ██╔╝██╔═══██╗██╔════╝██╔════╝
+ * █████╔╝ ██║██║     █████╔╝ ██║   ██║█████╗  █████╗
+ * ██╔═██╗ ██║██║     ██╔═██╗ ██║   ██║██╔══╝  ██╔══╝
+ * ██║  ██╗██║╚██████╗██║  ██╗╚██████╔╝██║     ██║
+ * ╚═╝  ╚═╝╚═╝ ╚═════╝╚═╝  ╚═╝ ╚═════╝ ╚═╝     ╚═╝
+ * ${pkg.title} v${pkg.version}
+ * ${pkg.homepage}
+ * ${pkg.repo}
+ */
+`,
+	};
+};
+
+module.exports = new ConfigOptions();

.kickoff/index.js

@@ -0,0 +1,28 @@
+/**
+ * Gulp tasks:
+ * - gulp                    : default task. Alias for `gulp compile`
+ * - gulp compile            : compiles js, scss, minifies images etc
+ * - gulp css                : processes scss both for kickoff and styleguide
+ * - gulp javascript         : compile js (using Webpack)
+ * - gulp serve              : run Browsersync server (with hot module reloading)
+ * - gulp svg                : converts SVGs into an SVG sprite-sheet
+ * - gulp images             : minifies images
+ * - gulp copy               : copies files, including standalone js files, to dist folder
+ * - gulp clean              : deletes certain dist directories
+ * - gulp watch              : watches for changes and compile
+ * - gulp test               : various tests. e.g. scss linting
+ */
+
+const fs = require('fs');
+
+const tasksDirectory = `${__dirname}/tasks/`;
+const tasks = fs.readdirSync(tasksDirectory);
+
+// loop through .kickoff and require each
+// any tasks you add will be included automatically
+tasks.forEach(task => {
+	// only add .js files
+	if (task.match(/\.js$/)) {
+		require(`${tasksDirectory}/${task}`);
+	}
+});

.kickoff/readme.md

@@ -0,0 +1,8 @@
+# Kickoff build configs
+> A mixture of gulp, Webpack and Browsersync
+
+## [Config.js](config.js)
+This file contains many global build task variables. Modify any of the values to suit your project.
+
+## Tasks
+Modify any build task 

.kickoff/tasks/assemble.js

@@ -0,0 +1,70 @@
+///////////////////////////////////////////////////////////
+// Task Dependencies
+
+const gulp        = require('gulp');
+const path        = require("path");
+const debug       = require('gulp-debug');
+const plumber     = require('gulp-plumber');
+const config      = require('../config');
+
+const assemble    = require('assemble');
+const expand      = require('expand')();
+const yaml        = require('js-yaml');
+const extname     = require('gulp-extname');
+
+///////////////////////////////////////////////////////////
+
+const app = assemble();
+const statixRoot = config.statix.dir;
+const statixRootHelpers = '../../' + config.statix.dir;
+const statixSrcDir = statixRoot + config.statix.srcDir;
+const statixDistDir = statixRoot + config.statix.distDir;
+
+
+app.helper('is', require(statixRootHelpers + config.statix.srcDir + config.statix.helpersDir + '/helper-is.js'));
+app.helper('exists', require(statixRootHelpers + config.statix.srcDir + config.statix.helpersDir + '/helper-exists.js'));
+app.helper('markdown', require('helper-markdown'));
+app.helper('md', require('helper-md'));
+
+// to help with parsing yml data files properly
+app.dataLoader('yml', function(str, fp) {
+	return yaml.safeLoad(str);
+});
+
+gulp.task('assemble', () => {
+
+		//init assemble plugins
+		app.enable('debugEngine');
+		app.layouts(statixSrcDir + config.statix.templateDir + '/layouts/*.{md,hbs}');
+		app.partials(statixSrcDir + config.statix.templateDir + '/partials/**/*.{md,hbs}');
+		app.data(statixSrcDir + config.statix.dataDir + '/*.{json,yml}');
+		app.data('./package.json', { namespace: true });
+		app.option('layout', 'default');
+
+		app.data({
+				baseUrl: (config.statix.isProd ? '' : '')
+		});
+
+		// pre-render any data <%= variable %> declarations in the yml front-end matter
+		app.preRender(/\.(hbs|html)$/, function (view, next) {
+		  view.data = expand(view.data, app.cache.data);
+		  next();
+		});
+
+		return app.src( statixSrcDir + config.statix.templateDir + '/pages/**/*.{md,hbs}' )
+						.pipe( plumber( config.gulp.onError ) ) // stops watch from breaking on error
+						.pipe( debug() )
+						.pipe( app.renderFile() )
+						.pipe( extname() )
+						.pipe( app.dest( statixDistDir ) );
+
+});
+
+
+gulp.task('assemble:prod', function () {
+
+		//ovewrite config vars to act like a production task as that is what is being requested
+		config.statix.isProd = true;
+		gulp.start('assemble');
+
+});

.kickoff/tasks/clean.js

@@ -0,0 +1,35 @@
+/**
+ * gulp clean
+ */
+const gulp = require('gulp');
+const del = require('del');
+const config = require('../config');
+
+gulp.task('clean', [/*'clean:images', 'clean:js', 'clean:css', 'clean:svg'*/], () => {
+	console.log('Cleaning files');
+});
+
+// Clean the image directory
+gulp.task('clean:images', () => {
+	return del([config.img.distDir]);
+});
+
+// Clean the css directory
+gulp.task('clean:css', () => {
+	return del([`${config.css.distDir}/**/*`]);
+});
+
+// Clean the js directory
+gulp.task('clean:js', () => {
+	return del([config.js.distDir]);
+});
+
+// Clean the svg directory
+gulp.task('clean:svg', () => {
+	return del([config.svg.distDir]);
+});
+
+// Clean the fonts directory
+// gulp.task('clean:fonts', () => {
+// 	return del([config.fonts.distDir]);
+// });

.kickoff/tasks/compile.js

@@ -0,0 +1,14 @@
+/**
+ * gulp compile
+ */
+const gulp = require('gulp');
+const config = require('../config');
+
+gulp.task('compile', [
+	'css',
+	'javascript',
+	'images',
+	'svg',
+	'copy',
+	'assemble'
+]);