update gulp files

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 bower_components/
+build/
 js/*

gulpfile.js

@@ -5,38 +5,79 @@ var reactify = require("reactify");
 var browserify = require("browserify");
 var source = require("vinyl-source-stream");
 var buffer = require("vinyl-buffer");
+var debug  =  require("gulp-debug");
 
 var config = {
-	srcPath: './src/',
-    dstPath: './js/',
-    minify: false
- };
+    src: './src',
+    dest: './build'
+}
 
 /**** gulp tasks ***************************************************/
+gulp.task('global', function() {
+    var entry = config.src + '/javascript/global.js';
+    var dest = config.dest;
+    var outputName = 'global.js';
+    var files = [
+        'jquery',
+        {file: 'backbone/node_modules/underscore', expose: 'underscore'}
+    ];
+
+    var b = browserify(entry)
+            .require(files);
+
+    return b.bundle()
+            .pipe(source(outputName))
+            .pipe(gulp.dest(dest));
+});
 
 gulp.task('app', function() {
-    var bundler = browserify(config.srcPath + 'app.js');
-    bundler.transform(reactify);
-
-    if (config.minify)
-        return bundler.bundle()
-            .pipe(source('app.js'))
-            .pipe(buffer())
-            .pipe(uglify())
-            .pipe(rename({suffix: '.min'}))
-            .pipe(gulp.dest(config.dstPath))
-    else
-        return bundler.bundle()
-            .pipe(source('app.js'))
-            .pipe(gulp.dest(config.dstPath))
+    var entry = config.src + '/javascript/app.js';
+    var dest = config.dest;
+    var outputName = 'app.js';
+    var modules = ['jquery', 'underscore'];
+
+    var b = browserify(entry)
+            .external(modules)
+            .transform(reactify);
+
+    return b.bundle()
+        .pipe(source(outputName))
+        .pipe(gulp.dest(dest));
+});
+
+gulp.task('htdocs', function() {
+    var src = config.src + '/htdocs/**.html';
+    var dest = config.dest;
+    return gulp.src(src)
+        //.pipe(debug({title: 'unicorn:'}))
+        .pipe(gulp.dest(dest));
 });
 
+gulp.task('css', function() {
+    var src = config.src + '/css/**';
+    var dest = config.dest + '/css';
+    return gulp.src(src)
+        //.pipe(debug({title: 'unicorn:'}))
+        .pipe(gulp.dest(dest));
+});
+
+gulp.task('images', function() {
+    var src = config.src + '/images/**';
+    var dest = config.dest + '/images';
+    return gulp.src(src)
+        .pipe(debug({title: 'unicorn:'}))
+        .pipe(gulp.dest(dest));
+});
+
+
 /**** gulp watch ***************************************************/
 gulp.task('watch', function() {
-    gulp.watch(config.srcPath+"*.js", [ 'app' ]);
+    gulp.watch( config.src + "/javascript/app.js", [ 'app' ]);
+    gulp.watch( config.src + "/htdocs/**.html", [ 'htdocs' ]);
+    gulp.watch( config.src + "/images/**", [ 'images' ]);
+    gulp.watch( config.src + "/css/**", [ 'css' ]);
 });
 
 /***** gulp main tasks *********************************************/
-gulp.task('build', ['app']);
-gulp.task('default', ['build']);
-
+gulp.task('build', ['images', 'css', 'htdocs', 'app']);
+gulp.task('default', ['global', 'build']);

package.json

@@ -1,19 +1,35 @@
 {
+  "browser": {
+    "underscore": "./node_modules/backbone/node_modules/underscore",
+    "bootstrap": "./node_modules/bootstrap/dist/js/bootstrap.js"
+  },
+  "browserify": {
+    "transform": [
+      "browserify-shim"
+    ]
+  },
+  "browserify-shim": {
+    "bootstrap": [
+      "jquery:$"
+    ]
+  },
   "devDependencies": {
+    "backbone-react-component": "~0.7.0",
+    "backbone-relational": "~0.9.0",
+    "browserify": "~8.0.0",
+    "browserify-shim": "^3.8.2",
     "gulp": "~3.8.5",
+    "gulp-debug": "^2.0.0",
+    "gulp-rename": "~1.2.0",
+    "gulp-uglify": "~1.0.0",
     "react": "~0.12.2",
-    "backbone-react-component": "~0.7.0",
     "reactify": "~0.17.0",
-    "browserify": "~7.0.0",
-    "vinyl-source-stream": "~1.0.0",
     "vinyl-buffer": "~1.0.0",
-    "gulp-uglify": "~1.0.0",
-    "gulp-rename": "~1.2.0",
-    "underscore": "~1.7.0",
-    "backbone-relational": "~0.9.0"
+    "vinyl-source-stream": "~1.0.0"
   },
   "dependencies": {
-    "jquery": "~1.11.0",
-    "bootstrap": "~3.1.0"
+    "backbone": "^1.1.2",
+    "bootstrap": "~3.1.0",
+    "jquery": "^2.1.3"
   }
 }

index.html → src/htdocs/index.html

@@ -2,8 +2,7 @@
 <html>
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <script src="bower_components/jquery/dist/jquery.min.js"></script>
-  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
+  <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
   <link rel="stylesheet" href="css/index.css">
 </head>
 <body>
@@ -33,7 +32,7 @@
   </div>
 
   <!-- Include scripts at the end of document for faster loading -->
-  <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
-  <script src="js/app.js"></script>
+  <script src="global.js"></script>
+  <script src="app.js"></script>
 </body>
 </html>

src/app.js → src/javascript/app.js

@@ -1,10 +1,13 @@
 var React = require('react');
 var Backbone = require('backbone');
+var $ = jQuery = require('jquery');
 var _ = require('underscore');
 require('backbone-react-component');
 require('backbone-relational');
 Backbone.$ = $;
 
+var bootstrap = require('bootstrap');
+
 config = {
     url: "http://katrin.kit.edu/newstatus/katrin/api/sql/",
     server: "orca",
@@ -74,7 +77,8 @@ var MyComponent = React.createClass({
         var arrowStyle = {
             display: 'block',
             marginLeft: 'auto',
-            marginRight: 'auto'
+            marginRight: 'auto',
+            width: '20px'
         };
         var rightAlign = {
             marginRight: '10px',
@@ -91,8 +95,8 @@ var MyComponent = React.createClass({
             <div><b style={leftAlign}>State</b> <span style={rightAlign}>{this.props.state ? 'Running' : 'Stopped'}</span></div><br/>
             <div><b style={leftAlign}>Run time</b> <span style={rightAlign}>{this.millisecondsToStr(this.props.uptime*1000)}</span></div><br/>
             { this.state.showMore 
-                ? <div><ToggleContent {...this.props} /> <img src="../image/arrow_up.png" alt="toggle" style={arrowStyle} onClick={this.onClick} /></div>
-                : <img src="../image/arrow_down.png" alt="toggle" style={arrowStyle} onClick={this.onClick} /> }
+                ? <div><ToggleContent {...this.props} /> <img src="./images/arrow_up.png" alt="toggle" style={arrowStyle} onClick={this.onClick} /></div>
+                : <img src="./images/arrow_down.png" alt="toggle" style={arrowStyle} onClick={this.onClick} /> }
             </div>);
     }
 });
@@ -192,4 +196,4 @@ setInterval(function() {
 
 $(document).ready(function() {
     console.log('ready'); 
-});
+});

src/javascript/global.js

@@ -0,0 +1 @@
+console.log('global.js loaded!');