Remove compiled app.js from tracked files, add SCSS support, point Gulpfile directly at ES6 version of utilities, ensure that assets are compiled before launching Electron

.gitignore

@@ -2,4 +2,6 @@
 # https://help.github.com/articles/ignoring-files
 # Example .gitignore files: https://github.com/github/gitignore
 /node_modules/
-/old/
+/old/
+/lib/
+/app.es5.js

app.es5.js

@@ -1,31 +0,0 @@
-'use strict';
-
-var Promise = require("bluebird");
-var rfr = require("rfr");
-var electron = require("electron");
-var path = require("path");
-
-var awaitReady = rfr("lib/electron/await-ready");
-var windowManagerCreator = rfr("lib/electron/window-manager");
-var viewUrlCreator = rfr("lib/electron/view-url");
-
-var windowManager = windowManagerCreator();
-
-var viewUrl = viewUrlCreator(path.join(__dirname, "lib/views"), {
-	extension: "html"
-});
-
-var useLiveReload = process.env.NODE_ENV === "development";
-
-var windows = {};
-
-Promise.try(function () {
-	return awaitReady(electron.app);
-}).then(function () {
-	windowManager.create({
-		width: 800,
-		height: 600,
-		url: viewUrl("index"),
-		liveReload: useLiveReload
-	});
-});

gulpfile.js

@@ -4,6 +4,7 @@ var path = require("path");
 var xtend = require("xtend");
 var rfr = require("rfr");
 
+var sass = require("gulp-sass");
 var jade = require("gulp-jade");
 var babel = require("gulp-babel");
 var livereload = require("gulp-livereload");
@@ -13,11 +14,12 @@ var plumber = require("gulp-plumber");
 var rename = require("gulp-rename");
 var namedLog = require("gulp-named-log");
 
-var runProcess = rfr("lib/gulp/run-process");
-var patchLivereloadLogger = rfr("lib/gulp/patch-livereload-logger");
+var runProcess = rfr("src/gulp/run-process");
+var patchLivereloadLogger = rfr("src/gulp/patch-livereload-logger");
 
 var babelLogger = namedLog("babel");
 var jadeLogger = namedLog("jade");
+var sassLogger = namedLog("sass");
 var electronLogger = namedLog("electron");
 var livereloadLogger = namedLog("livereload");
 
@@ -26,7 +28,8 @@ patchLivereloadLogger(livereload, livereloadLogger);
 var sources = {
 	"babel-main": "app.js",
 	"babel-lib": "src/**/*.js",
-	"jade-views": "src/views/**/*.jade"
+	"jade-views": "src/views/**/*.jade",
+	"sass-main": "src/stylesheets/**/*.scss"
 }
 
 function getLiveReloadStream() {
@@ -37,7 +40,7 @@ function getLiveReloadStream() {
 	return lr;
 }
 
-gulp.task("electron", function() {
+gulp.task("electron", ['babel-lib', 'babel-main', 'jade-views', 'sass-main'], function() {
 	var electronProcess = runProcess(path.join(__dirname, "node_modules/.bin/electron"), [__dirname], {
 		logger: electronLogger,
 		env: xtend(process.env, {
@@ -77,12 +80,23 @@ gulp.task("jade-views", function() {
 		.pipe(gulp.dest("lib/views/"));
 });
 
+gulp.task("sass-main", function() {
+	return gulp.src(sources["sass-main"])
+		.pipe(plumber())
+		.pipe(cache("sass-main"))
+		.pipe(sass().on('error', sassLogger.error)).on('data', sassLogger.log)
+		.pipe(getLiveReloadStream())
+		.pipe(remember("sass-main"))
+		.pipe(gulp.dest("lib/stylesheets/"));
+});
+
 gulp.task('watch', function () {
 	livereload.listen();
 
 	gulp.watch(sources["babel-lib"], ["babel-lib"]);
 	gulp.watch(sources["babel-main"], ["babel-main"]);
 	gulp.watch(sources["jade-views"], ["jade-views"]);
+	gulp.watch(sources["sass-main"], ["sass-main"]);
 });
 
-gulp.task('default', ['babel-lib', 'babel-main', 'jade-views', 'watch', 'electron']);
+gulp.task('default', ['watch', 'electron']);

package.json

@@ -15,13 +15,14 @@
   ],
   "author": "Sven Slootweg",
   "license": "WTFPL",
-  "main": "app.js",
+  "main": "app.es5.js",
   "dependencies": {
     "bhttp": "^1.2.1",
     "bluebird": "^3.3.4",
     "chalk": "^1.1.3",
     "electron-prebuilt": "^0.37.5",
     "file-url": "^1.1.0",
+    "gulp-sass": "^2.2.0",
     "ia-headers": "^1.0.0",
     "rfr": "^1.2.3",
     "uuid": "^2.0.1",

src/gulp/run-process.js

@@ -2,9 +2,9 @@
 
 const childProcess = require("child_process");
 const rfr = require("rfr");
-const logStream = rfr("lib/gulp/log-stream");
+const logStream = rfr("src/gulp/log-stream");
 
-module.exports = function runProcess(path, args, options = {}) {
+module.exports = function runProcess(path, args, options) {
 	if (options.logger != null) {
 		options.logger.info(`Starting ${path}...`);
 	}
@@ -24,5 +24,5 @@ module.exports = function runProcess(path, args, options = {}) {
 
 	proc.on("close", (code) => {
 		options.logger.info(`Exited with code ${code.toString()}: ${path}.`);
-	})
+	});
 }

src/stylesheets/style.scss

@@ -0,0 +1,3 @@
+body {
+	font-family: sans-serif;
+}

src/views/index.jade

@@ -2,6 +2,7 @@ html
 	head
 		meta(charset="UTF-8")
 		title Sample application
+		link(rel="stylesheet", href="../stylesheets/style.css")
 	body
 		h1 Sample header 2
 		p Some sample content