full contents

.gitignore

@@ -0,0 +1,3 @@
+.DS_Store
+build
+node_modules

README.md

@@ -0,0 +1,22 @@
+# node-firefox-examples-gulp
+
+> An example for demonstrating how to build an app using npm modules + browserify + gulp
+
+This is part of the [node-firefox](https://github.com/mozilla/node-firefox) project.
+
+## Getting it
+
+### Clone it
+
+`git clone https://github.com/mozilla/node-firefox-examples-gulp.git`
+
+### Or download
+
+[the zip](https://github.com/mozilla/node-firefox-examples-gulp/archive/master.zip)
+
+## Initialising
+
+Install node.js if not installed yet, then cd to the directory and run `npm init`.
+
+To build the files into the `build` folder just do `npm start`. This will build the app into `build/index.html` which you can open with your browser to see it in action, unless you're using app APIs in which case you will need to run it in a Firefox OS simulator. There are two other gulp tasks available, `npm default-one` will launch the first simulator it can find and push the app to it, launch it, and watch for CSS changes. `npm default-all` will do the same but for all the simulators you have installed in your system.
+

gulpfile.js

@@ -76,14 +76,7 @@ gulp.task('simulate-all', function() {
 });
 
 gulp.task('reload-css', function() {
-  console.log('going to reload', activeRuntimes.length);
-  activeRuntimes.forEach(function(runtime) {
-    reloadCSS({
-      app: runtime.app,
-      client: runtime.client,
-      srcPath: appPath
-    });
-  });
+  activeRuntimes.forEach(reloadRuntimeCSS);
 });
 
 gulp.task('watch-css', function() {
@@ -92,7 +85,7 @@ gulp.task('watch-css', function() {
 
 gulp.task('default-one', ['lint', 'build', 'simulate-one', 'watch-css']);
 
-gulp.task('default-all', ['lint', 'build', 'simulate-all', 'watch-css']);
+gulp.task('default-all', ['lint', 'build', 'simulate-all',  'watch-css']);
 
 gulp.task('default', ['default-one']);
 
@@ -124,7 +117,7 @@ function simulate(appPath, simulatorDef) {
 
 
 function startAndConnect(def) {
-	return startSimulator(def).then(function(simulator) {
+  return startSimulator(def).then(function(simulator) {
     return connect(simulator.port).then(function(client) {
       return ({
         simulator: simulator,
@@ -174,4 +167,15 @@ function uninstallApps(client, apps) {
 }
 
 
-
+function reloadRuntimeCSS(runtime) {
+  var binary = runtime.simulator.binary;
+  reloadCSS({
+    app: runtime.app,
+    client: runtime.client,
+    srcPath: appPath
+  }).then(function(res) {
+    console.log('reloaded done', binary);
+  }).catch(function(err) {
+    console.error('big error', err);
+  });
+}

package.json

@@ -0,0 +1,48 @@
+{
+  "name": "node-firefox-examples-gulp",
+  "version": "1.0.0",
+  "description": "an example for demonstrating how to build an app using npm modules + browserify + gulp",
+  "main": "src/js/main.js",
+  "scripts": {
+    "start": "gulp build",
+    "default-one": "gulp default-one",
+    "default-all": "gulp default-all"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mozilla/node-firefox-examples-gulp"
+  },
+  "keywords": [
+    "template",
+    "npm",
+    "umd",
+    "browserify",
+    "firefox os",
+    "apps"
+  ],
+  "author": "Mozilla",
+  "license": "Apache 2",
+  "bugs": {
+    "url": "https://github.com/mozilla/node-firefox-examples-gulp/issues"
+  },
+  "homepage": "https://github.com/mozilla/node-firefox-examples-gulp",
+  "dependencies": {
+    "browserify": "^5.10.0",
+    "es6-promise": "^2.0.1",
+    "gulp": "^3.8.7",
+    "gulp-browserify": "^0.5.0",
+    "gulp-jshint": "^1.8.4",
+    "gulp-rename": "^1.2.0",
+    "gulp-replace": "^0.4.0",
+    "gulp-uglify": "^0.3.1",
+    "node-firefox-connect": "^1.0.0",
+    "node-firefox-find-app": "^1.0.0",
+    "node-firefox-find-simulators": "^1.0.0",
+    "node-firefox-install-app": "^1.0.0",
+    "node-firefox-launch-app": "^1.0.1",
+    "node-firefox-reload-css": "^1.0.0",
+    "node-firefox-start-simulator": "^1.1.0",
+    "node-firefox-uninstall-app": "^1.0.0",
+    "yargs": "^1.3.1"
+  }
+}

src/css/style.css

@@ -0,0 +1,11 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+body {
+  color: #fff;
+	background: #006;
+  font-family: 'Helvetica', 'Helvetica Neue', sans;
+}

src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="utf8">
+		<title>node-firefox + gulp app</title>
+		<link rel="stylesheet" href="css/style.css">
+		<script src="js/main.js" defer></script>
+	</head>
+	<body>
+		<h1>node-firefox + gulp</h1>
+	</body>
+</html>
+

src/js/main.js

@@ -0,0 +1,2 @@
+console.log('hey there');
+document.body.appendChild(document.createTextNode(window.navigator.userAgent));

src/manifest.webapp

@@ -0,0 +1,11 @@
+{
+  "name": "node-firefox-examples-gulp",
+  "description": "An app for showing how to use node-firefox with gulp",
+  "launch_path": "/index.html",
+  "icons": {
+    "16": "/icons/icon16x16.png",
+    "48": "/icons/icon48x48.png",
+    "60": "/icons/icon60x60.png",
+    "128": "/icons/icon128x128.png"
+  }
+}