add basic build process

package.json

@@ -8,7 +8,7 @@
     "dist": "dist"
   },
   "scripts": {
-    "start": "serve -l 3000 ./docs",
+    "start": "node ./scripts/start.js",
     "build": "node ./scripts/build.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -31,9 +31,11 @@
   "homepage": "https://github.com/Gioni06/terminal.css#readme",
   "devDependencies": {
     "autoprefixer": "^9.4.6",
+    "chokidar": "^2.0.4",
+    "clean-css": "^4.2.1",
+    "live-server": "^1.2.1",
     "mkdirp": "^0.5.1",
     "postcss": "^7.0.14",
-    "serve": "^10.1.1",
-    "clean-css": "^4.2.1"
+    "serve": "^10.1.1"
   }
 }

scripts/build.js

@@ -1,39 +1,8 @@
+const build = require('./utils/build-fn')
 const path = require('path')
-const fs = require('fs')
-const mkdirp = require('mkdirp');
-const autoprefixer = require('autoprefixer')({
-	browsers: [
-        '>1%',
-        'last 4 versions',
-        'Firefox ESR',
-        'not ie < 9',
-      ],
-      flexbox: 'no-2009'
-});
-const postcss      = require('postcss');
-const CleanCSS = require('clean-css');
-    
 
-const css = fs.readFileSync(path.resolve(__dirname, '../src/terminal.css'), 'utf8');
-
-mkdirp(path.resolve(__dirname,'../dist/'), function (err) {
-    if (err) {
-		throw e
-	} else {
-		postcss([ autoprefixer ]).process(css, { from: path.resolve(__dirname, '../src/terminal.css'), to: path.resolve(__dirname, '../dist/terminal.css') }).then(function (result) {
-			result.warnings().forEach(function (warn) {
-				console.warn(warn.toString());
-				process.exit(1)
-			});
-
-			const options = {  };
-			const output = new CleanCSS(options).minify(result.css);
-			
-			// copy to docs 
-			fs.writeFileSync(path.resolve(__dirname, '../docs/terminal.min.css'), output.styles , 'utf8')
-			// copy to dist   
-			fs.writeFileSync(path.resolve(__dirname, '../dist/terminal.min.css'), output.styles , 'utf8')
-			fs.writeFileSync(path.resolve(__dirname, '../dist/terminal.css'), result.css, 'utf8')
-		});
-	}
-});
+build.run({
+	sourceFile: path.resolve(__dirname, '../src/terminal.css'),
+	distFolder: path.resolve(__dirname, '../dist'),
+	docsFolder: path.resolve(__dirname, '../docs'),
+})

scripts/start.js

@@ -0,0 +1,50 @@
+const chokidar = require('chokidar');
+const liveServer = require('live-server');
+const build = require('./utils/build-fn');
+const path = require('path');
+
+function debounce(func, wait, immediate) {
+	var timeout;
+	return function() {
+		var context = this, args = arguments;
+		var later = function() {
+			timeout = null;
+			if (!immediate) func.apply(context, args);
+		};
+		var callNow = immediate && !timeout;
+		clearTimeout(timeout);
+		timeout = setTimeout(later, wait);
+		if (callNow) func.apply(context, args);
+	};
+};
+
+/**
+ * Serve the site in watch mode
+ */
+const serve = (flags) => {
+  console.log(`Starting local server at http://localhost:${flags.port}`);
+
+  const options = {
+	sourceFile: path.resolve(__dirname, '../src/terminal.css'),
+	distFolder: path.resolve(__dirname, '../dist'),
+	docsFolder: path.resolve(__dirname, '../docs')
+  }
+
+  build.run(options);
+  liveServer.start({
+      port: flags.port,
+      root: options.docsFolder,
+      open: true,
+      logLevel: 0
+    });
+
+  chokidar.watch(options.sourceFile, { ignoreInitial: true }).on(
+    'all',
+    debounce(() => {
+      build.run(options);
+      console.log('Waiting for changes...');
+    }, 500)
+  );
+};
+
+serve({ port: 3000 })

scripts/utils/build-fn.js

@@ -0,0 +1,50 @@
+const path = require('path')
+const fs = require('fs')
+const mkdirp = require('mkdirp');
+
+function run({
+	sourceFile,
+	distFolder,
+	docsFolder
+}) {
+	const autoprefixer = require('autoprefixer')({
+		browsers: [
+			'>1%',
+			'last 4 versions',
+			'Firefox ESR',
+			'not ie < 9',
+		],
+		flexbox: 'no-2009'
+	});
+	const postcss      = require('postcss');
+	const CleanCSS = require('clean-css');
+		
+
+	const css = fs.readFileSync(sourceFile, 'utf8');
+
+	mkdirp(distFolder, function (err) {
+		if (err) {
+			throw e
+		} else {
+			postcss([ autoprefixer ]).process(css, { from: sourceFile, to: path.resolve(distFolder, 'terminal.css') }).then(function (result) {
+				result.warnings().forEach(function (warn) {
+					console.warn(warn.toString());
+					process.exit(1)
+				});
+
+				const options = {  };
+				const output = new CleanCSS(options).minify(result.css);
+				
+				// copy to docs 
+				fs.writeFileSync(path.resolve(docsFolder, 'terminal.min.css'), output.styles , 'utf8')
+				// copy to dist   
+				fs.writeFileSync(path.resolve(distFolder, 'terminal.min.css'), output.styles , 'utf8')
+				fs.writeFileSync(path.resolve(distFolder, 'terminal.css'), result.css, 'utf8')
+			});
+		}
+	});
+}
+
+module.exports = {
+	run
+}

src/terminal.css

@@ -3,7 +3,7 @@
     --global-line-height: 1.4rem;
     --global-space: 10px;
     --font-stack: 'Fira Code',Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
-    --background-color: var(--invert-font-color);
+    --background-color: #fff;
     --page-width: 70em;
     --font-color: #151513;
     --invert-font-color: #fff;