Refactor build process

app/index.html

@@ -16,6 +16,7 @@
         <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
 
         <link rel="import" href="src/padlock.html">
+        <link rel="import" href="src/components/app/app.html">
 
         <script>
             /* global padlock */

app/src/padlock.html

@@ -25,5 +25,3 @@
 <script src="Announcements.js"></script>
 <script src="import.js"></script>
 <script src="export.js"></script>
-
-<link rel="import" href="components/app/app.html">

assets/app-icon.svg

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="1000px" height="1000px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
-<rect x="-225" y="-145" display="none" fill="#F5F5F5" width="1442" height="1342"/>
-<g>
-	<rect x="103" y="632" fill="#59C6FF" width="794" height="625"/>
-	<path fill="none" stroke="#59C6FF" stroke-width="110" stroke-miterlimit="10" d="M778,688V533.991
-		C778,380.461,653.531,256,500,256c-153.53,0-278,124.461-278,277.991V728"/>
-</g>
-</svg>

chrome/manifest.json

@@ -1,7 +1,7 @@
 {
     "manifest_version": 2,
     "name": "Padlock",
-    "version": "1.1.0",
+    "version": "1.2.0",
     "description": "A minimalist open source password manager.",
     "author": "Martin Kleinschrodt",
     "app": {
@@ -16,11 +16,11 @@
         "*://cloud.padlock.io/*"
     ],
     "icons": {
-        "16": "assets/icon16.png",
-        "48": "assets/icon48.png",
-        "128": "assets/icon128.png",
-        "256": "assets/icon256.png",
-        "512": "assets/icon512.png",
-        "1024": "assets/icon1024.png"
+        "16": "icons/icon16.png",
+        "48": "icons/icon48.png",
+        "128": "icons/icon128.png",
+        "256": "icons/icon256.png",
+        "512": "icons/icon512.png",
+        "1024": "icons/icon1024.png"
     }
 }

gulpfile.js

@@ -1,13 +1,14 @@
 /* eslint-env node */
 "use strict";
 
-var gulp = require("gulp"),
-    stylus = require("gulp-stylus"),
-    nib = require("nib"),
-    watch = require("gulp-watch"),
-    argv = require("yargs").argv,
-    stylemod = require("gulp-style-modules"),
-    tools = require("./tools.js");
+const gulp = require("gulp");
+const stylus = require("gulp-stylus");
+const nib = require("nib");
+const watch = require("gulp-watch");
+const { argv } = require("yargs");
+const stylemod = require("gulp-style-modules");
+const { buildChrome, compileCss } = require("./lib/build.js");
+const { eslint } = require("./lib/lint.js");
 
 gulp.task("stylus", function() {
     if (argv.watch) {
@@ -18,15 +19,19 @@ gulp.task("stylus", function() {
                 .pipe(gulp.dest("./src"));
         });
     } else {
-        return tools.compileCss();
+        return compileCss();
     }
 });
 
-gulp.task("eslint", function() {
-    tools.eslint();
-});
+gulp.task("eslint", eslint);
 
 // Deploy a minified/built version of the app to a given destination folder
-gulp.task("deploy", function() {
-    tools.deploy(argv.dest);
+gulp.task("build", () => {
+    let promises = [];
+
+    if (argv.chrome) {
+        promises.push(buildChrome());
+    }
+
+    return Promise.all(promises);
 });

lib/build.js

@@ -0,0 +1,108 @@
+/* eslint-env node */
+/* eslint-disable no-console */
+"use strict";
+
+const path = require("path");
+const fs = require("fs-extra");
+const gulp = require("gulp");
+const stylus = require("gulp-stylus");
+const nib = require("nib");
+const Q = require("q");
+const vulcanize = require("gulp-vulcanize");
+const crisper = require("gulp-crisper");
+const rmdir = require("rimraf");
+const insertLines = require("gulp-insert-lines");
+const stylemod = require("gulp-style-modules");
+const { exec } = require("child_process");
+
+const projectRoot = path.resolve(__dirname, "..");
+const appDir = path.join(projectRoot, "app");
+
+function compileCss() {
+    var deferred = Q.defer();
+
+    gulp.src("./src/**/*.styl", {cwd: appDir})
+        .pipe(stylus({use: [nib()]}))
+        .pipe(stylemod())
+        .pipe(gulp.dest("./src", {cwd: appDir}))
+        .on("end", function() {
+            deferred.resolve();
+        });
+
+    return deferred.promise;
+}
+
+function copyFiles(source, dest, files) {
+    return Q.all(files.map((f) => Q.nfcall(fs.copy, path.resolve(source, f), path.resolve(dest, f))));
+}
+
+/**
+ * Wraps a `require('child_process').exec(command)` call into a Promise
+ * @param {String} command
+ * @param {Boolean} logStderr Whether or not to write stderr of child process to stderr or main process
+ * @param {Boolean} logStdout Whether or not to write stdout of child process to stdout or main process
+ * @return {Promise}
+ */
+function pexec(command, logStderr=true, logStdout) {
+    return new Promise(function(resolve, reject) {
+        var cp = exec(command, function(err, stdout) {
+            if (err) {
+                reject(err);
+            }
+            resolve(stdout);
+        });
+
+        if (logStderr) {
+            cp.stderr.on('error', console.error);
+        }
+        if (logStdout) {
+            cp.stdout.on('data', console.log);
+        }
+    });
+}
+
+function build(dest = "build") {
+    return pexec(`pushd ${appDir} && bower install && popd`)
+        .then(() => Q.nfcall(rmdir, dest))
+        .then(() => compileCss())
+        .then(() => {
+            gulp.src("index.html", {cwd: appDir})
+                .pipe(vulcanize({
+                    inlineScripts: true,
+                    inlineCss: true,
+                    excludes: [
+                        "overrides.css",
+                        "cordova.js"
+                    ]
+                }))
+                .pipe(insertLines({
+                    "after": /<head>/i,
+                    "lineAfter": "<meta http-equiv=\"Content-Security-Policy\"" +
+                    " content=\"default-src 'self' gap:; style-src 'self'" +
+                    " 'unsafe-inline'; connect-src https://*\">"
+                }))
+                .pipe(crisper())
+                .pipe(gulp.dest(dest));
+        })
+        .then(() => copyFiles(appDir, dest, [
+            "cordova.js",
+            "overrides.css",
+            "src/crypto.js",
+            "bower_components/sjcl/sjcl.js"
+        ]));
+}
+
+function buildChrome(dest = "dist/chrome") {
+    return build(dest)
+        .then(() => copyFiles(path.join(projectRoot, "chrome"), dest, [
+            "manifest.json",
+            "background.js",
+            "icons"
+        ]));
+}
+
+module.exports = {
+    compileCss: compileCss,
+    build: build,
+    buildChrome: buildChrome
+};

lib/lint.js

@@ -0,0 +1,20 @@
+"use strict";
+
+const gulp = require("gulp");
+const eslint = require("gulp-eslint");
+const path = require("path");
+
+const projectRoot = path.resolve(__dirname, "..");
+
+function runEslint(files) {
+    gulp.src(files || "app/**/*.{js,html}", {cwd: projectRoot})
+        .pipe(eslint())
+        .pipe(eslint.format())
+        .pipe(eslint.results(function(results) {
+            process.exit(results.errorCount);
+        }));
+}
+
+module.export = {
+    eslint: runEslint
+};

package.json

@@ -4,6 +4,7 @@
   "devDependencies": {
     "electron-builder": "^7.18.0",
     "eslint-plugin-html": "^1.5.1",
+    "fs-extra": "^1.0.0",
     "gulp": "^3.9.1",
     "gulp-crisper": "1.1.0",
     "gulp-eslint": "^3.0.1",

tools.js

@@ -1,108 +0,0 @@
-/* eslint-env node */
-/* eslint-disable no-console */
-"use strict";
-
-var path = require("path"),
-    gulp = require("gulp"),
-    stylus = require("gulp-stylus"),
-    nib = require("nib"),
-    eslint = require("gulp-eslint"),
-    Q = require("q"),
-    vulcanize = require("gulp-vulcanize"),
-    crisper = require("gulp-crisper"),
-    rmdir = require("rimraf"),
-    ncp = require("ncp").ncp,
-    mkdirp = require("mkdirp"),
-    insertLines = require("gulp-insert-lines"),
-    stylemod = require("gulp-style-modules");
-
-var projectRoot = path.resolve(__dirname);
-
-function compileCss() {
-    var deferred = Q.defer();
-
-    gulp.src("./src/**/*.styl", {cwd: projectRoot})
-        .pipe(stylus({use: [nib()]}))
-        .pipe(stylemod())
-        .pipe(gulp.dest("./src", {cwd: projectRoot}))
-        .on("end", function() {
-            deferred.resolve();
-        });
-
-    return deferred.promise;
-}
-
-function runEslint(files) {
-    gulp.src(files || "src/**/*.{js,html}", {cwd: projectRoot})
-        .pipe(eslint())
-        .pipe(eslint.format())
-        .pipe(eslint.results(function(results) {
-            process.exit(results.errorCount);
-        }));
-}
-
-function build(dest) {
-    dest = dest || "build";
-    return gulp.src("index.html", {cwd: projectRoot})
-        .pipe(vulcanize({
-            inlineScripts: true,
-            inlineCss: true,
-            excludes: [
-                "overrides.css",
-                "cordova.js"
-            ]
-        }))
-        .pipe(insertLines({
-            "after": /<head>/i,
-            "lineAfter": "<meta http-equiv=\"Content-Security-Policy\"" +
-            " content=\"default-src 'self' gap:; style-src 'self'" +
-            " 'unsafe-inline'; connect-src https://*\">"
-        }))
-        .pipe(crisper())
-        .pipe(gulp.dest(dest));
-}
-
-function deploy(dest) {
-    dest = dest || "deploy";
-    console.log("Deploying app to " + path.resolve(process.cwd(), dest));
-    console.log("Cleaning up existing target folder...");
-    Q.nfcall(rmdir, dest)
-    .then(function() {
-        console.log("Creating target folder structure...");
-        return Q.all([
-            Q.nfcall(mkdirp, path.join(dest, "src")),
-            Q.nfcall(mkdirp, path.join(dest, "bower_components/sjcl"))
-        ]);
-    })
-    .then(function() {
-        console.log("Compiling css files...");
-        return compileCss();
-    })
-    .then(function() {
-        console.log("Building source...");
-        return build(dest);
-    })
-    .then(function() {
-        console.log("Copying assets...");
-        return Q.all([
-            Q.nfcall(ncp, path.resolve(projectRoot, "background.js"), path.resolve(dest, "background.js")),
-            Q.nfcall(ncp, path.resolve(projectRoot, "cordova.js"), path.resolve(dest, "cordova.js")),
-            Q.nfcall(ncp, path.resolve(projectRoot, "overrides.css"), path.resolve(dest, "overrides.css")),
-            Q.nfcall(ncp, path.resolve(projectRoot, "manifest.json"), path.resolve(dest, "manifest.json")),
-            Q.nfcall(ncp, path.resolve(projectRoot, "src/crypto.js"), path.resolve(dest, "src/crypto.js")),
-            Q.nfcall(ncp, path.resolve(projectRoot, "bower_components/sjcl/sjcl.js"),
-                path.resolve(dest, "bower_components/sjcl/sjcl.js")),
-            Q.nfcall(ncp, path.resolve(projectRoot, "assets"), path.resolve(dest, "assets")),
-        ]);
-    })
-    .then(function() {
-        console.log("Done!");
-    });
-}
-
-module.exports = {
-    compileCss: compileCss,
-    runEslint: runEslint,
-    build: build,
-    deploy: deploy
-};