gulpfile.js

var gulp = require('gulp'),
    path = require("path"),
    gutil = require('gulp-util'),
    uglify = require("gulp-uglify"),
    ts = require("gulp-typescript"),
    tsClientProject = ts.createProject("source/javascript/tsconfig.json"),
    tsElectronProject = ts.createProject("source/app/tsconfig.json"),
    bowersource = "bower_components/",

    jshint = require('gulp-jshint'),
    sass = require('gulp-sass'),
    concat = require('gulp-concat'),
    sourcemaps = require('gulp-sourcemaps'),

    electron = require("electron-connect").server.create({
        path: ".",
        spawnOpt: {
            cwd: path.join(__dirname, "app")
        },
        verbosy: true
    }),
    exec = require("child_process").execSync,
    ownScripts = 'source/javascript/**/*.ts',

    input = {
        sass: [
            bowersource + "angular-material/angular-material.scss",
            'source/scss/**/*.scss'
        ],

        typescript: [
            "typings/browser.d.ts",
            "source/javascript/main.ts",
            ownScripts
        ],

        mainTypescript: [
            "typings/main.d.ts",
            "source/app/**/*.ts"
        ],

        body: [
            "source/body/**/*.html",
            "source/body/**/*.json"
        ],

        vendor: [
            bowersource + "angular/angular.js",
            bowersource + "angular-animate/angular-animate.js",
            bowersource + "angular-aria/angular-aria.js",
            bowersource + "angular-messages/angular-messages.js",
            bowersource + "angular-resource/angular-resource.js",
            bowersource + "angular-material/angular-material.js",
            bowersource + "angular-translate/angular-translate.js",
            bowersource + "angular-translate-loader-partial/angular-translate-loader-partial.js",
            bowersource + "angular-ui-router/release/angular-ui-router.js",
            bowersource + "angular-local-storage/dist/angular-local-storage.js",
            bowersource + "angular-websocket/dist/angular-websocket.js"
        ]
    },

    output = "app/public",
    mainOutput = "app";


function watch() {
    "use strict";
    var t1 = gulp.watch(ownScripts, ['build-ts']);
    var t2 = gulp.watch(input.sass, ['build-css']);
    var t3 = gulp.watch(input.body, ["copy-body"]);
    var t4 = gulp.watch(input.mainTypescript, ["build-electron"]);
    var t5 = gulp.watch('source/backend/**/*.go', ['go-compile']);
    var t6 = gulp.watch('app/**/*', [electron.restart("--enable-logging")]);
    return [t1, t2, t3, t4, t5, t6];
}

/* run the watch task when gulp is called without arguments */
gulp.task('default', ['build-css', 'vendor-js', 'build-ts', 'build-electron', 'copy-body', "go-compile"]);
gulp.task('build-watch', ['default', "run-electron"], watch);

/* compile scss files */
gulp.task('build-css', function () {
    "use strict";
    return gulp.src(input.sass)
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(concat("bundle.css"))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(output));
});

/* concat javascript files, minify if --type production */
gulp.task('build-ts', function () {
    "use strict";
    return gulp.src(input.typescript)
        .pipe(sourcemaps.init())
        .pipe(ts(tsClientProject))
        .pipe(concat('bundle.js'))
        //only uglify if gulp is ran with '--type production'
        .pipe(gutil.env.type === 'production' ? uglify() : gutil.noop())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(output));
});

gulp.task('build-electron', function () {
    "use strict";
    var tsTask = gulp.src(input.mainTypescript)
        .pipe(sourcemaps.init())
        .pipe(ts(tsElectronProject))
        //only uglify if gulp is ran with '--type production'
        .pipe(gutil.env.type === 'production' ? uglify() : gutil.noop())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(mainOutput));
    var packageTask = gulp.src("source/app/package.json")
        .pipe(gulp.dest("app"));
    return [tsTask, packageTask];
});

gulp.task("copy-body", function () {
    return gulp.src(input.body).pipe(gulp.dest(mainOutput));
});

gulp.task('run-electron', function () {
    electron.start("--enable-logging");
});

gulp.task("go-compile", function () {
    var command;
    if (process.platform === "win32") {
        command = "go build -o ./app/backend.exe ./source/backend"
    } else {
        command = "go build -o ./app/backend ./source/backend";
    }
    console.log(__dirname);
    gutil.log(command);
    return exec(command);
});

gulp.task('vendor-js', function () {
    "use strict";
    return gulp.src(input.vendor)
        .pipe(sourcemaps.init())
        .pipe(concat('vendor.js'))
        //only uglify if gulp is ran with '--type production'
        .pipe(gutil.env.type === 'production' ? uglify() : gutil.noop())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(output));
});

/* Watch these files for changes and run the task on update */
gulp.task('watch', watch);

index.html

<!DOCTYPE html>
<html lang="en" ng-app="ModpackHelper" ng-controller="MainController as main">
<head>
    <meta charset="UTF-8">
    <title>Modpack Helper {{main.application.modpack ? "- " + main.application.modpack.name : ""}}</title>
    <!-- build:remove -->
    <!-- Connect to server process -->
    <script>require('electron-connect').client.create()</script>
    <!-- end:build -->
    <!-- Ignore that these are inresolved, they will appear when the application is build -->
    <link href="public/bundle.css" rel="stylesheet">
    <script src="public/vendor.js"></script>
    <script src="public/bundle.js"></script>
</head>
<body >
<body ng-cloak layout="column" layout-gt-sm="row">
<md-sidenav md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')" class="md-whiteframe-6dp" layout-align="space-between">
    <md-list role="list">
        <md-list-item role="listitem" ng-show="main.application.modpacks.length">
            <form flex>
                <md-input-container class="md-block">
                    <label>Modpack:</label>
                    <md-select ng-model="main.application.modpack">
                        <md-option ng-repeat="modpack in main.application.modpacks" ng-value="modpack">
                            {{modpack.name}}
                        </md-option>
                    </md-select>
                </md-input-container>
            </form>
        </md-list-item>
        <md-list-item role="button" ng-click="main.createNewModpack()">
            <p>
                <strong translate>MODPACK.NEW</strong>
            </p>
        </md-list-item>
        <md-list-item role="listitem" ui-sref="modpack" ui-sref-active="active" ng-show="main.application.modpack">
            <p>
                <strong translate>MODPACK.DETAILS</strong>
            </p>
        </md-list-item>
        <md-list-item role="listitem" ui-sref="technic" ui-sref-active="active" ng-show="main.application.modpack">
            <p>
                <strong translate>SERVICE.TECHNIC</strong>
            </p>
        </md-list-item>
    </md-list>
</md-sidenav>

<div class="md-whiteframe-6dp" role="main" flex layout="column">
    <!--<md-toolbar class="md-whiteframe-3dp" layout-align-gt-sm="center center" >-->
        <!--<div layout-align-gt-sm="center center" class="md-toolbar-tools">-->
            <!--<md-button class="md-icon-button" area-label="Menu" hide-gt-sm>-->
                <!--<md-icon class="material-icons">menu</md-icon>-->
            <!--</md-button>-->
            <!--<span flex hide-gt-sm></span>-->
            <!--<h2>-->
                <!--{{main.application.title | translate}}-->
            <!--</h2>-->
        <!--</div>-->
    <!--</md-toolbar>-->
    <md-content flex layout="column" ui-view layout-padding>

    </md-content>
</div>
</body>
</html>

main.ts

import {
    app,
    BrowserWindow
} from 'electron'

import fs = require("fs");
import path = require("path");
import childprocess = require("child_process");
import {IpcHandlersCreator} from './IpcHandlers';
// There is no typings available for electron-connect, and i'm lazy, so any will have to do
var client:any = require("electron-connect");

let win : Electron.BrowserWindow;
console.log("Bla");
function startGoServer() {
    var platform = process.platform;
    let executeable: string;
    if(platform === "win32") {
        executeable = "backend.exe";
    } else {
        executeable = "backend";
    }

    // Create the backend service, and tell it where to save data
    var backend = childprocess.spawn(executeable, [app.getPath("userData")]);
    backend.stdout.on("data", function(data: any) {
        console.log(data.toString());
    });
    backend.stderr.on("data", function(data: any) {
        console.log(data.toString());
    });
    console.log("Spawned child process");
}

function createWindow() {

    // Make sure to open the window where the user closed it, and with the same size
    var initPath = path.join(app.getPath("userData"), "init.json");
    var data:{bounds: Electron.Rectangle};
    try  {
        data = JSON.parse(fs.readFileSync(initPath, "utf8"));
    } catch(e) {}

    // Create the browser window
    win = new BrowserWindow((data && data.bounds) ? data.bounds : {width: 800, height: 600, frame: true});

    // and load the index.body of the app.
    win.loadURL(`file://${__dirname}/index.html`);

    // live reload from electron connect
    client.client.create(win);
    
    // Save the window state, so it opens in that place next time
    win.on("close", function() {
        var data = {
            bounds: win.getBounds()
        };
        fs.writeFileSync(initPath, JSON.stringify(data));
    });

    // Emitted when the window is closed
    win.on("closed", () => {
        win = null;
    });

    IpcHandlersCreator.bindListeners();
    startGoServer()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', () => {
    // On OS X it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', () => {
    // On OS X it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (win === null) {
        createWindow();
    }
});