Still working on

bower.json

@@ -25,6 +25,9 @@
     "blueimp-bootstrap-image-gallery": "~3.1.3",
     "jquery": "~2.1.4",
     "react": "~0.13.3",
-    "underscore": "~1.8.3"
+    "underscore": "~1.8.3",
+    "blueimp-gallery": "~2.15.4",
+    "react-mini-router": "~1.1.7",
+    "react-select": "~0.5.5"
   }
 }

gulpfile.js

@@ -1,6 +1,8 @@
 var gulp = require('gulp');
 var pkginfo = require('./package.json');
-
+var path = require('path');
+var es = require('event-stream');
+var glob = require('glob');
 var browserify = require('browserify');
 var buffer = require('vinyl-buffer');
 var del = require('del');
@@ -10,79 +12,82 @@ var source = require('vinyl-source-stream');
 var stylus = require('gulp-stylus');
 var uglify = require('gulp-uglify');
 var _ = require('lodash');
+var fs = require('vinyl-fs');
 var bowerResolve = require('bower-resolve');
 
+var debug = gutil.env.type === 'production';
+var bowerPackages = _.keys(require('./bower.json').dependencies) || [];
 
+gulp.task('default', ['build:scripts', 'build:styles']);
 
-gulp.task('build', ['build:scripts', 'build:styles']);
+gulp.task('build:scripts', ['build:scripts:app', 'build:scripts:vendor']);
 
+gulp.task('build:scripts:app', function (done) {
+    glob(pkginfo.assets.scripts.entries, function (err, files) {
 
-gulp.task('build:scripts:vendor', function() {
-  var b = browserify({
-      // generate source maps in non-production environment
-      debug: true
-    });
+        if (err) done(err);
+        var tasks = files.map(function (file) {
 
-    getBowerPackageIds().forEach(function (id) {
+            var b = browserify({
+                debug: debug,
+                entries: [file]
+            });
 
-      var resolvedPath = bowerResolve.fastReadSync(id);
+            bowerPackages.forEach(function (lib) {
+                var resolvedPath = bowerResolve.fastReadSync(lib);
+                b.external(resolvedPath, {expose: lib})
+            });
 
-      b.require(resolvedPath, {
-          expose: id
-      });
+            return b
+                .bundle()
+                .pipe(source(path.basename(file)))
+                .pipe(rename({
+                    extname: ".bundle.js"
+                }))
+                .pipe(buffer())
+                .pipe(debug ? uglify() : gutil.noop())
+                .pipe(gulp.dest(pkginfo.dist));
+        });
+        es.merge(tasks).on('end', done);
     });
+});
 
-    var stream = b.bundle()
+gulp.task('build:scripts:vendor', function () {
+    var b = browserify({
+        debug: debug
+    });
+    bowerPackages.forEach(function (id) {
+        var resolvedPath = bowerResolve.fastReadSync(id);
+        console.log(resolvedPath);
+        //console.log(id);
+        b.require(resolvedPath, {
+            expose: id
+        });
+    });
+    return b.bundle()
         .pipe(source('vendor.js'))
         .pipe(gulp.dest(pkginfo.dist));
-
-    return stream;
 });
 
-gulp.task('build:scripts', function() {
-  browserify({
-    entries: pkginfo.assets.scripts.entries,
-    paths: pkginfo.assets.scripts.paths
-  }).bundle()
-  .pipe(source('bundle.js'))
-  .pipe(buffer())
-  .pipe(gutil.env.type === 'production' ? uglify() : gutil.noop())
-  .pipe(gulp.dest(pkginfo.dist));
-});
 
-
-gulp.task('build:styles', function() {
-  gulp.src(pkginfo.assets.styles.entries).pipe(stylus({
-    compress: true,
-    'include css': true,
-    include: pkginfo.stylus.includes
-  }))
-  .pipe(rename('bundle.css'))
-  .pipe(gulp.dest(pkginfo.dist));
+gulp.task('build:styles', function () {
+    gulp.src(pkginfo.assets.styles.entries).pipe(stylus({
+        compress: true,
+        'include css': true,
+        include: pkginfo.stylus.includes
+    }))
+        .pipe(rename('bundle.css'))
+        .pipe(gulp.dest(pkginfo.dist));
 });
 
 
-gulp.task('watch', ['build'], function() {
-  gulp.watch(pkginfo.assets.scripts.watches, ['build:scripts']);
-  gulp.watch(pkginfo.assets.styles.watches, ['build:styles']);
+gulp.task('watch', ['build'], function () {
+    gulp.watch(pkginfo.assets.scripts.watches, ['build:scripts']);
+    gulp.watch(pkginfo.assets.styles.watches, ['build:styles']);
 });
 
 
-gulp.task('clean', function(callback) {
-  glob = pkginfo.dist + '/*';
-  del([glob, '!.gitignore'], callback);
+gulp.task('clean', function (callback) {
+    glob = pkginfo.dist + '/*';
+    del([glob, '!.gitignore'], callback);
 });
-
-
-
-function getBowerPackageIds() {
-  // read bower.json and get dependencies' package ids
-  var bowerManifest = {};
-  try {
-    bowerManifest = require('./bower.json');
-  } catch (e) {
-    // does not have a bower.json manifest
-  }
-  return _.keys(bowerManifest.dependencies) || [];
-
-}

package.json

@@ -35,7 +35,10 @@
     "vinyl-source-stream": "^1.1.0",
     "browserify": "~11.0.0",
     "bower-resolve": "~2.2.1",
-    "lodash": "~3.10.0"
+    "lodash": "~3.10.0",
+    "glob": "~5.0.14",
+    "event-stream": "~3.3.1",
+    "vinyl-fs": "~1.0.0"
   },
   "stylus": {
     "includes": [
@@ -54,9 +57,7 @@
   },
   "assets": {
     "scripts": {
-      "entries": [
-        "./project/static/src/js/main.js"
-      ],
+      "entries": "./project/static/src/js/*.js",
       "watches": [
         "./project/static/src/js/**/*.js",
         "./project/static/src/js/**/*.jsx"

project/static/src/js/feed.js

@@ -2,5 +2,5 @@ var React = require('react');
 var $ = require('jquery');
 
 
-var feed = React.createFactory(require('./index.jsx'));
+var feed = React.createFactory(require('./feed/index.js'));
 React.render(feed(), document.getElementById("vacancies"));

project/static/js/bootstrap-image-gallery.js → project/static/src/js/main/bootstrap-image-gallery.js

@@ -18,7 +18,13 @@
             'jquery',
             './blueimp-gallery'
         ], factory);
-    } else {
+    } else if (typeof require === 'function') {
+        factory(
+            require('jquery'),
+            require('blueimp-gallery')
+        )
+    }
+    else {
         factory(
             window.jQuery,
             window.blueimp.Gallery

project/static/src/js/mainpage.js

@@ -0,0 +1,3 @@
+//require('./main/bootstrap-image-gallery.js');
+//require('blueimp-gallery');
+require('blueimp-gallery');

project/static/src/js/vacancy.js

@@ -1,5 +1,5 @@
 var node = document.getElementById('attached-form');
 var securityToken = node.dataset['securityToken'];
-var ApplyForm = require("vacancy_form/form.js");
+var ApplyForm = require("./vacancy_form/form.js");
 
-React.render(<ApplyForm securityToken={securityToken} />, node);
+React.render(React.createElement(ApplyForm, {securityToken: securityToken}), node);

project/templates/pages/mainpage.html

@@ -1,10 +1,8 @@
 {% extends "base.html" %}
 
 {% block meta %}
-    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-    <script src="//blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
-{#    <script src="static/js/bootstrap-image-gallery.js"></script>#}
-{#    <script src="{{ url_for('static', filename="dist/vendor.js") }}"></script>#}
+    <script src="{{ url_for('static', filename="dist/vendor.js") }}" type="text/javascript"></script>
+    <script src="{{ url_for('static', filename="dist/mainpage.bundle.js") }}" type="text/javascript"></script>
 {% endblock %}