Merge pull request mixtube#21 from jraoult/introduce_mainjs

Introduce main.js

Author: Jonathan Raoult

app/index.html

@@ -304,10 +304,7 @@ <h3>Results from {{pLabel}}:</h3>
   </div>
 </div>
 
-<script src="scripts/app.js"></script>
-<script>
-  initMixtube({youtubeAPIKey: '<!-- @echo YOUTUBE_API_KEY -->'});
-</script>
+<script src="scripts/main.js"></script>
 <script src="https://www.youtube.com/iframe_api" defer></script>
 
 </body>

app/scripts/main.js

@@ -0,0 +1,5 @@
+'use strict';
+
+var mixtube = require('./mixtube');
+
+mixtube({youtubeAPIKey: process.env.MIXTUBE_YOUTUBE_API_KEY});

app/scripts/app.js app/scripts/mixtube.js

@@ -11,7 +11,7 @@ var angular = require('angular'),
  * @param {{track: function(event: string, data:= Object)}} [delegates.analyticsTracker]
  * @param {{track: function(error: Error)}} [delegates.errorsTracker]
  */
-function initMixtube(environment, delegates) {
+function mixtube(environment, delegates) {
 
   var _delegates = defaults({}, delegates, {
     analyticsTracker: {track: noop},
@@ -51,4 +51,4 @@ function initMixtube(environment, delegates) {
   });
 }
 
-global.initMixtube = initMixtube;
+module.exports = mixtube;

gulpfile.js

@@ -24,7 +24,6 @@ var path = require('path'),
   autoprefixer = require('autoprefixer'),
   csswring = require('csswring'),
   htmlreplace = require('gulp-html-replace'),
-  preprocess = require('gulp-preprocess'),
   svgSprite = require('gulp-svg-sprite'),
   replace = require('gulp-replace'),
   svg2png = require('gulp-svg2png'),
@@ -49,6 +48,7 @@ function watchifiedSrc(src, baseDir, pipelineFn) {
   function doBundle() {
     return pipelineFn(
       b.bundle()
+        .on('error', gutil.log.bind(gutil, 'Browserify Error'))
         .pipe(source(path.relative(baseDir, src)))
     );
   }
@@ -108,12 +108,7 @@ function doInlineCss(opts) {
 }
 
 function doHtml() {
-  return gulp.src('app/index.html', {base: 'app'})
-    .pipe(preprocess({
-      context: {
-        YOUTUBE_API_KEY: process.env.MIXTUBE_YOUTUBE_API_KEY
-      }
-    }));
+  return gulp.src('app/index.html', {base: 'app'});
 }
 
 function doFavicons(htmlCodeCb) {
@@ -190,7 +185,7 @@ gulp.task('js:dev', function() {
 
   // generates the bundle and watches changes
   return merge(
-    watchifiedSrc('./app/scripts/app.js', './app/scripts/', pipelineFn),
+    watchifiedSrc('./app/scripts/main.js', './app/scripts/', pipelineFn),
     watchifiedSrc('./app/scripts/components/capabilities/videoCallPlayTest.js', './app/scripts/', pipelineFn));
 });
 
@@ -242,7 +237,7 @@ gulp.task('css:dist', function() {
 
 gulp.task('js:dist', function() {
   return merge(
-    browserifiedSrc('./app/scripts/app.js', './app/scripts/'),
+    browserifiedSrc('./app/scripts/main.js', './app/scripts/'),
     browserifiedSrc('./app/scripts/components/capabilities/videoCallPlayTest.js', './app/scripts/'))
     .pipe(buffer())
     .pipe(sourcemaps.init({loadMaps: true}))

package.json

@@ -20,6 +20,7 @@
     "compression": "^1.4.4",
     "csswring": "^4.0.0",
     "del": "^2.0.1",
+    "envify": "^3.4.0",
     "favicons": "jraoult/favicons#add_html_callback_to_stream_api",
     "gulp": "^3.8.10",
     "gulp-gh-pages": "^0.5.2",
@@ -56,7 +57,8 @@
   },
   "browserify": {
     "transform": [
-      "brfs"
+      "brfs",
+      "envify"
     ]
   },
   "config": {