Merge branch 'master' into e3e

.gitignore

@@ -3,5 +3,12 @@ node_modules
 .DS_Store
 Thumbs.db
 *.autogenerated
-/build/
-/dist/
+
+# ignore everything in 'app' folder what had been generated from 'src' folder
+/app/stylesheets
+/app/app.js
+/app/background.js
+/app/env.json
+/app/**/*.map
+
+/dist

README.md

@@ -2,7 +2,7 @@ electron-boilerplate
 ==============
 Minimalistic yet comprehensive boilerplate application for [Electron runtime](http://electron.atom.io).  
 
-Provides cross-platform development environment, which works the same way on OSX, Windows and Linux, and allows you to generate ready for distribution installers of your app for those three operating systems.
+Provides cross-platform development environment, which works the same way on OSX, Windows and Linux, and allows you to generate ready for distribution installers of your app for those operating systems.
 
 At the same time this boilerplate does not impose on you any framework (like Angular or React). Tries to give you only the 'electron' part of technology stack so you can pick your favorite tools for 'the actual app' part.
 
@@ -19,24 +19,41 @@ npm start
 
 # Structure of the project
 
-There are **two** `package.json` files:  
+## Declaring dependencies
 
-#### 1. For development
+There are **two** `package.json` files:
+
+#### 1. `package.json` for development
 Sits on path: `electron-boilerplate/package.json`. Here you declare dependencies for your development environment and build scripts. **This file is not distributed with real application!**
 
 Also here you declare the version of Electron runtime you want to use:
 ```json
 "devDependencies": {
-  "electron-prebuilt": "^1.2.0"
+  "electron": "1.3.3"
 }
 ```
+Note: [Electron authors advise](http://electron.atom.io/docs/tutorial/electron-versioning/) to use fixed version here.
 
-#### 2. For your application
+#### 2. `package.json` for your application
 Sits on path: `electron-boilerplate/app/package.json`. This is **real** manifest of your application. Declare your app dependencies here.
 
 #### OMG, but seriously why there are two `package.json`?
 1. Native npm modules (those written in C, not JavaScript) need to be compiled, and here we have two different compilation targets for them. Those used in application need to be compiled against electron runtime, and all `devDependencies` need to be compiled against your locally installed node.js. Thanks to having two files this is trivial.
-2. When you package the app for distribution there is no need to add up to size of the app with your `devDependencies`. Here those are always not included (because reside outside the `app` directory).
+2. When you package the app for distribution there is no need to add up to size of the app with your `devDependencies`. Here those are always not included (reside outside the `app` directory).
+
+## Folders
+
+The applicaiton is split between two main folders...
+
+`src` - this folder is intended for files which need to be transpiled or compiled (files which can't be used directly by electron).
+
+`app` - contains all static assets (put here images, css, html etc.) which don't need any pre-processing.
+
+Build process compiles all stuff from `src` folder and puts it into `app` folder, so after build finished `app` contains full, runnable application.
+
+Treat `src` and `app` folders like two halves of one bigger thing.
+
+Drawback of this design is that `app` folder contains some files which should be git-ignored and some which should not (see `.gitignore` file). But thanks to this split development builds are much much faster.
 
 # Development
 
@@ -63,33 +80,16 @@ npm install name_of_npm_module --save
 
 ### Working with modules
 
-How about being future proof and using ES6 modules everywhere in your app? Thanks to [rollup](https://github.com/rollup/rollup) you can do that. It will transpile the imports to proper `require()` statements, so even though ES6 modules aren't natively supported yet you can start using them today.
+Thanks to [rollup](https://github.com/rollup/rollup) you can (and should) use ES6 modules for all code in `src` folder. But because ES6 modules still aren't natively supported you can't use it in `app` folder.
 
-You can use it on those kinds of modules:
+So for file in `src` folder do this:
 ```js
-// Modules authored by you
-import { myStuff } from './my_lib/my_stuff';
-// Node.js native
-import fs from 'fs';
-// Electron native
-import { app } from 'electron';
-// Loaded from npm
-import moment from 'moment';
+import myStuff from './my_lib/my_stuff';
 ```
 
-### Including files to your project
-
-The build script copies files from `app` to `build` directory and the application is started from `build`. Therefore if you want to use any special file/folder in your app make sure it will be copied via some of glob patterns in `tasks/build/build.js`:
-
+But in file in `app` folder the same line must look as follows:
 ```js
-var paths = {
-    copyFromAppDir: [
-        './node_modules/**',
-        './vendor/**',
-        './**/*.html',
-        './**/*.+(jpg|png|svg)'
-    ],
-}
+var myStuff = require('./my_lib/my_stuff');
 ```
 
 ## Unit tests
@@ -114,7 +114,7 @@ It will start the packaging process for operating system you are running this co
 
 You can create Windows installer only when running on Windows, the same is true for Linux and OSX. So to generate all three installers you need all three operating systems.
 
-All packaging actions are handled by [electron-builder](https://github.com/electron-userland/electron-builder) module. See docs of that tool if you want to customize something or just see what's available.
+All packaging actions are handled by [electron-builder](https://github.com/electron-userland/electron-builder). See docs of this tool if you want to customize something.
 
 # License
 

gulpfile.js

@@ -1,4 +1,4 @@
 'use strict';
 
-require('./tasks/build/build');
+require('./tasks/build');
 require('./tasks/start');

package.json

@@ -3,7 +3,9 @@
     "appId": "com.example.electron-boilerplate",
     "app-category-type": "your.app.category.type",
     "win": {
-      "target": ["nsis"],
+      "target": [
+        "nsis"
+      ],
       "icon": "resources/windows/icon.ico"
     },
     "nsis": {
@@ -19,32 +21,31 @@
     }
   },
   "directories": {
-    "buildResources": "resources",
-    "app": "build"
+    "buildResources": "resources"
+  },
+  "scripts": {
+    "postinstall": "install-app-deps",
+    "build": "gulp build",
+    "prerelease": "gulp build --env=production",
+    "release": "build --x64 --publish never",
+    "start": "gulp start",
+    "pretest": "gulp build --env=test",
+    "test": "electron-mocha app/app.js --renderer --require source-map-support/register"
   },
   "devDependencies": {
     "chai": "^3.5.0",
+    "electron": "1.3.3",
     "electron-builder": "^5.12.1",
-    "electron-mocha": "^2.0.0",
-    "electron-prebuilt": "^1.0.1",
+    "electron-mocha": "^3.0.0",
     "fs-jetpack": "^0.9.0",
     "gulp": "^3.9.0",
     "gulp-batch": "^1.0.5",
     "gulp-less": "^3.0.3",
     "gulp-plumber": "^1.1.0",
     "gulp-util": "^3.0.6",
     "gulp-watch": "^4.3.5",
-    "q": "^1.4.1",
-    "rollup": "^0.26.3",
+    "rollup": "^0.34.7",
+    "source-map-support": "^0.4.2",
     "yargs": "^4.2.0"
-  },
-  "scripts": {
-    "postinstall": "install-app-deps",
-    "build": "gulp build",
-    "prerelease": "gulp build --env=production",
-    "release": "build --x64 --publish never",
-    "start": "gulp start",
-    "pretest": "gulp build --env=test",
-    "test": "electron-mocha build --renderer"
   }
 }

app/background.js → src/background.js

@@ -4,8 +4,8 @@
 // window from here.
 
 import { app, Menu } from 'electron';
-import { devMenuTemplate } from './helpers/dev_menu_template';
-import { editMenuTemplate } from './helpers/edit_menu_template';
+import { devMenuTemplate } from './menu/dev_menu_template';
+import { editMenuTemplate } from './menu/edit_menu_template';
 import createWindow from './helpers/window';
 
 // Special module holding environment variables which you declared
@@ -22,6 +22,14 @@ var setApplicationMenu = function () {
     Menu.setApplicationMenu(Menu.buildFromTemplate(menus));
 };
 
+// Save userData in separate folders for each environment.
+// Thanks to this you can use production and development versions of the app
+// on same machine like those are two separate apps.
+if (env.name !== 'production') {
+    var userDataPath = app.getPath('userData');
+    app.setPath('userData', userDataPath + ' (' + env.name + ')');
+}
+
 app.on('ready', function () {
     setApplicationMenu();
 

app/hello_world/hello_world.spec.js → src/hello_world/hello_world.spec.js

@@ -1,5 +1,6 @@
 import { expect } from 'chai';
 import { greet, bye } from './hello_world';
+import env from '../env';
 
 describe("hello world", function () {
 
@@ -11,4 +12,9 @@ describe("hello world", function () {
         expect(bye()).to.equal('See ya!');
     });
 
+    it("should load test environment variables", function () {
+        expect(env.name).to.equal('test');
+        expect(env.description).to.equal('Add here any environment specific stuff you like.');
+    });
+
 });

tasks/build.js

@@ -0,0 +1,73 @@
+'use strict';
+
+var pathUtil = require('path');
+var gulp = require('gulp');
+var less = require('gulp-less');
+var watch = require('gulp-watch');
+var batch = require('gulp-batch');
+var plumber = require('gulp-plumber');
+var jetpack = require('fs-jetpack');
+
+var bundle = require('./bundle');
+var generateSpecsEntryFile = require('./generate_specs_entry_file');
+var utils = require('./utils');
+
+var projectDir = jetpack;
+var srcDir = projectDir.cwd('./src');
+var destDir = projectDir.cwd('./app');
+
+// -------------------------------------
+// Tasks
+// -------------------------------------
+
+var bundleApplication = function () {
+    return Promise.all([
+            bundle(srcDir.path('background.js'), destDir.path('background.js')),
+            bundle(srcDir.path('app.js'), destDir.path('app.js')),
+        ]);
+};
+
+var bundleSpecs = function () {
+    return generateSpecsEntryFile().then(function (specEntryPointPath) {
+        return bundle(specEntryPointPath, destDir.path('app.js'));
+    });
+};
+
+gulp.task('bundle', function () {
+    if (utils.getEnvName() === 'test') {
+        return bundleSpecs();
+    }
+    return bundleApplication();
+});
+
+gulp.task('less', function () {
+    return gulp.src(srcDir.path('stylesheets/main.less'))
+        .pipe(plumber())
+        .pipe(less())
+        .pipe(gulp.dest(destDir.path('stylesheets')));
+});
+
+gulp.task('environment', function () {
+    var configFile = 'config/env_' + utils.getEnvName() + '.json';
+    projectDir.copy(configFile, destDir.path('env.json'), { overwrite: true });
+});
+
+gulp.task('watch', function () {
+    var beepOnError = function (done) {
+        return function (err) {
+            if (err) {
+                utils.beepSound();
+            }
+            done(err);
+        };
+    };
+
+    watch('src/**/*.js', batch(function (events, done) {
+        gulp.start('bundle', beepOnError(done));
+    }));
+    watch('src/**/*.less', batch(function (events, done) {
+        gulp.start('less', beepOnError(done));
+    }));
+});
+
+gulp.task('build', ['bundle', 'less', 'environment']);