accelo_ui_styleguide/app.js

Generator for accelo ui styleguide

#! /usr/bin/env node
var commander = require('commander');
var kss = require('kss');
var fs = require('fs');
var tmp = require('tmp');
var bs = require("browser-sync").create();

commander.arguments('<projectPath>')
	.action(function(projectPath) {
		serveKss(projectPath);
	})
	.parse(process.argv);

function serveKss(projectPath) {
	const {name: tmpPath} = tmp.dirSync();
	exportCssSvgs(projectPath, tmpPath);

	buildKss({projectPath, tmpPath}).then(() => {
		bs.watch(`${projectPath}/**/*.hbs`, (event) => {
			if (event === 'change') {
				console.log('Change in *.hbs file, rebuilding styleguide');
				buildKss({projectPath, tmpPath}).then(bs.reload);
			}
		});

		bs.init({
			server: `${tmpPath}`
		});
	});
}

function buildKss({projectPath, tmpPath}) {
	return kss({
		source: [`${projectPath}/affinity/htdocs/sass`, `${projectPath}/affinity/htdocs/angular/js/components`],
		destination: tmpPath,
		css: `./main.css`,
		builder: `${__dirname}/accelo-builder`
	});
}

function exportCssSvgs(projectPath, tmpPath) {
	let cssFile = fs.readFileSync(`${projectPath}/affinity/htdocs/css/main.css`);
	fs.writeFileSync(`${tmpPath}/main.css`, cssFile);

	var svgDefs = fs.readFileSync(`${projectPath}/affinity/htdocs/angular/js/components/utils/svg/al-svg-defs.svg`);
	fs.writeFileSync(`${tmpPath}/al-svg-defs.svg`, svgDefs);
}