v 2.0.0

.babelrc

@@ -0,0 +1,3 @@
+{
+	"presets": ["@babel/preset-env"]
+}

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 Davs Howard
+Copyright (c) 2020 Davs Howard
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,67 +1,88 @@
 ![Tux](/logo.jpg)
 
-A baseline toolkit to ease the building of static HTML sites or templated CMS builds. Using Webpack 4, Gulp, PostCSS, Nunjunks and BrowserSync.
+A baseline toolkit to ease the building of static HTML sites or templated CMS builds. Using Webpack 4, Gulp 4, PostCSS, Nunjunks and BrowserSync.
 
-## Features 💪 
-* HTML - Build templates with Nunjucks 
-* CSS - PostCSS with autoprefixing, nesting, custom media queries and more - "Use tomorrow’s CSS syntax, today"
-* JS - Bundle and transpile ES6 JavaScript with Webpack and Babel
-* Assets - Automatically optimise images, manage fonts and static assets
-* Development - Live reload with BrowserSync and Webpack's HMR. 
+## Features 💪
+
+- HTML - Build templates with Nunjucks
+- CSS - PostCSS with autoprefixing, nesting, custom media queries and more - "Use tomorrow’s CSS syntax, today"
+- JS - Bundle and transpile ES6 JavaScript with Webpack and Babel
+- Assets - Automatically optimise images, manage fonts and static assets
+- Development - Live reload with BrowserSync and Webpack's HMR.
 
 ## Getting started 📖
+
 ### Requirements
-* Node.js
-* npm
+
+- Node.js
+- npm
 
 ### Off you go
+
 #### Clone
+
 ```bash
 git clone https://github.com/davshoward/tux <my-project-name>
 cd <my-project-name>
 ```
 
 #### Install with npm
+
 ```bash
 npm install
 ```
 
 #### Start
+
 ```bash
 npm start
 ```
 
 #### Build
+
 ```bash
 npm run build
 ```
 
 #### Configure
+
 Customise your own file paths within gulpfile.js/config.js
 
 ## Contributing
+
 Welcome any improvements or suggestions :-)
 
 ## Changelog
 
+### 2.0.0
+
+- Updated to Gulp 4 and introduced some adjustments to the build process
+- Restructured the CSS components
+- Introduced new CSS elements including theme file and prefers-reduced-motion override
+
 ### 1.2.1
-* Added JS-free FOUC fix
-* Minor CSS update
-* Remove Aria role=document (from PR #1)
+
+- Added JS-free FOUC fix
+- Minor CSS update
+- Remove Aria role=document (from PR #1)
 
 ### 1.2.0
-* Updated foundation css
-* Introduce spacing rhythm and fluid headers
-* Allow urls to not require .html
-* Added css-to-JS breakpoint sync
-* Updated dependencies - including adding postcss color-mod
+
+- Updated foundation css
+- Introduce spacing rhythm and fluid headers
+- Allow urls to not require .html
+- Added css-to-JS breakpoint sync
+- Updated dependencies - including adding postcss color-mod
 
 ### 1.1.1
-* Added focus-visible usage for better baseline accessibility
+
+- Added focus-visible usage for better baseline accessibility
 
 ### 1.1.0
-* Fully migrate from SASS to PostCSS
-* Updated dependencies
+
+- Fully migrate from SASS to PostCSS
+- Updated dependencies
 
 ### 1.0.0
-* Initial commit
+
+- Initial commit

gulpfile.js/config.js

@@ -1,39 +1,114 @@
-module.exports = {
-	src: './src',
-	dest: './public',
+const webpack = require("webpack");
+const glob = require("glob");
+const path = require("path");
+const env = require("./lib/env");
 
-	html: {
-		src: 'html',
-		dest: './'
-	},
+const src = "src";
+const dest = "public";
 
-	static: {
-		src: 'static',
-		dest: './'
+const assets = [
+	{
+		src: `${src}/fonts/**`,
+		dest: `${dest}/fonts`
 	},
+	{
+		src: `${src}/static/**`,
+		dest: `${dest}/`
+	}
+];
 
-	styles: {
-		src: 'css',
-		dest: 'styles'
+const server = {
+	files: [],
+	server: {
+		baseDir: dest,
+		middleware: [],
+		serveStaticOptions: {
+			extensions: ["html"]
+		}
 	},
+	watchOptions: {
+		debounceDelay: 2000
+	}
+};
 
-	scripts: {
-		src: 'js',
-		dest: 'js'
+const html = {
+	src: `${src}/html`,
+	dest: `${dest}/`,
+	data: `${src}/data/data.json`,
+	render: {
+		path: `${src}/html`,
+		envOptions: {
+			watch: false
+		}
 	},
-
-	images: {
-		src: 'images',
-		dest: 'images'
+	htmlmin: {
+		collapseWhitespace: true
 	},
+	excludeFolders: ["layout", "components", "macros"],
+	ext: ["html", "njk", "json"]
+};
 
-	videos: {
-		src: 'images/_video',
-		dest: 'images/_video'
-	},
+const images = {
+	src: `${src}/images/**`,
+	dest: `${dest}/images`,
+	ext: ["jpg", "png", "svg", "gif", "webp"],
+	watch: `${src}/images/**`
+};
+
+const styles = {
+	src: `${src}/styles/*.css`,
+	dest: `${dest}/styles`,
+	watch: `${src}/styles/**/*.css`
+};
 
-	fonts: {
-		src: 'fonts',
-		dest: 'fonts'
+const scripts = {
+	src: `${src}/js/**`,
+	dest: `${dest}/js`,
+	webpack: {
+		mode: env.prod ? "production" : "development",
+		context: path.resolve(__dirname, `../${src}/js`),
+		entry: {
+			main: !env.prod
+				? ["webpack-hot-middleware/client?reload=true", "./main.js"]
+				: ["./main.js"],
+			vendor: glob.sync(path.resolve(__dirname, `../${src}/js/vendor/**/*.js`))
+		},
+		output: {
+			path: path.resolve(__dirname, `../${dest}/js`),
+			filename: "[name].bundle.js",
+			publicPath: "/js"
+		},
+		resolve: {
+			alias: {
+				utils: `${src}/js/utils`,
+				modules: `${src}/js/modules`
+			}
+		},
+		plugins: !env.prod ? [new webpack.HotModuleReplacementPlugin()] : [],
+		module: {
+			rules: [
+				{
+					test: /\.js$/,
+					exclude: /node_modules/,
+					use: ["babel-loader"]
+				}
+			]
+		}
 	}
 };
+
+const report = {
+	src: [styles.dest, scripts.dest, images.dest]
+};
+
+module.exports = {
+	src,
+	dest,
+	server,
+	assets,
+	images,
+	html,
+	styles,
+	scripts,
+	report
+};

gulpfile.js/index.js

@@ -1,8 +1,31 @@
-/* 
-    gulpfile.js
-    ------------
-    One large file was too difficult to maintain so each task has been split into more managable sizes.
-*/
-
-const requireDir = require('require-dir');
-requireDir('./tasks', { recurse: true });
+const { series, parallel, watch } = require("gulp");
+const browserSync = require("browser-sync");
+
+const config = require("./config");
+const env = require("./lib/env");
+
+const clean = require("./tasks/clean");
+const styles = require("./tasks/styles");
+const html = require("./tasks/html");
+const images = require("./tasks/images");
+const assets = require("./tasks/assets");
+const report = require("./tasks/report");
+const scripts = require("./tasks/scripts");
+const server = require("./tasks/server");
+
+const watching = cb => {
+	watch(config.styles.watch, styles);
+	watch(config.images.watch, images);
+	watch(config.html.src, html);
+	watch(config.html.data, html);
+
+	cb();
+};
+
+const tasks = [styles, images, assets, html, scripts];
+
+module.exports = {
+	default: env.prod
+		? series(clean, parallel(...tasks), report)
+		: series(clean, parallel(...tasks), watching, server)
+};

gulpfile.js/tasks/assets.js

@@ -0,0 +1,21 @@
+const { src, dest } = require("gulp");
+const changed = require("gulp-changed");
+const config = require("../config").assets;
+const browserSync = require("browser-sync");
+
+const assets = callback => {
+	if (config.length <= 0) {
+		return callback();
+	}
+
+	config.forEach(entry => {
+		src(entry.src)
+			.pipe(changed(entry.dest))
+			.pipe(dest(entry.dest))
+			.pipe(browserSync.stream());
+	});
+
+	return callback();
+};
+
+module.exports = assets;