Moved to gulp as a build system

.gitignore

@@ -1,4 +1,5 @@
 lib-cov
+dist
 *.seed
 *.log
 *.csv

gulpfile.js

@@ -0,0 +1,100 @@
+var gulp = require('gulp'),
+    fs = require('fs'),
+    gutil = require('gulp-util'),
+    path = require('path'),
+    argv = require('yargs')
+       .alias('p', 'port')
+       .alias('s', 'server')
+       .argv;
+
+var devServer = {
+  port: argv.port || Math.round(31337 + Math.random() * 1000),
+  server: argv.server || '0.0.0.0',
+  livereload: 35000 + Math.round((Math.random() * 1000)),
+  root: './dist'
+};
+
+gulp.task('default', ['build', 'startStaticServer', 'watchChanges']);
+gulp.task('build', ['makeDist', 'runBrowserify', 'copyDist', 'compileLess']);
+
+gulp.task('runBrowserify', runBrowserify);
+gulp.task('compileLess', compileLess);
+gulp.task('makeDist', makeDist);
+gulp.task('copyDist', copyDist);
+gulp.task('watchChanges', watchChanges);
+gulp.task('startStaticServer', startStaticServer);
+
+function runBrowserify() {
+  produceMainBundle();
+}
+
+function produceMainBundle() {
+  var bundle = require('browserify')().add('./src/scripts/index.js');
+  bundle
+    .bundle()
+    .on('error', function (err) {
+      gutil.log(gutil.colors.red('Failed to browserify'), gutil.colors.yellow(err.message));
+    })
+    .pipe(fs.createWriteStream(path.join(__dirname + '/dist/bundle.js')));
+}
+
+function compileLess() {
+  var less = require('gulp-less')('src/styles');
+  less.on('error', function (err) {
+    gutil.log(gutil.colors.red('Failed to compile less: '), gutil.colors.yellow(err.message));
+  });
+
+	gulp.src('src/styles/main.less')
+		.pipe(less)
+		.pipe(gulp.dest('dist/styles'));
+}
+
+function makeDist() {
+  var fs = require('fs');
+  if (!fs.existsSync('./dist')) {
+    fs.mkdirSync('./dist');
+  }
+}
+
+function copyDist() {
+  var concat = require('gulp-concat');
+
+  gulp.src('./src/index.html').pipe(gulp.dest('./dist'));
+
+  gulp.src([
+      './node_modules/angular/lib/angular.min.js',
+      './src/external/angular-route.js'
+    ])
+    .pipe(concat('external.min.js'))
+    .pipe(gulp.dest('./dist'));
+
+  gulp.src([
+    './node_modules/twitter-bootstrap-3.0.0/fonts/*'])
+      .pipe(gulp.dest('./dist/fonts/'));
+}
+
+function watchChanges() {
+  gulp.watch(['src/**/*.*', '!node_modules/**', '!src/*.html'], ['runBrowserify', 'copyDist']);
+  gulp.watch('src/styles/*.less', ['compileLess']);
+  gulp.watch(['src/*.html'], ['copyDist']);
+  gulp.watch(['dist/**', '!dist/**/node_modules/**']).on('change', notifyLivereload);
+}
+
+var lr;
+function startStaticServer() {
+  var express = require('express');
+  var app = express();
+  app.use(require('connect-livereload')({port: devServer.livereload }));
+  app.use(express.static(devServer.root));
+  app.listen(devServer.port, devServer.server, function () {
+    gutil.log("opened server on http://" + devServer.server + ":" + devServer.port);
+  });
+
+  lr = require('tiny-lr')();
+  lr.listen(devServer.livereload);
+}
+
+function notifyLivereload(event) {
+  var fileName = require('path').relative(devServer.root, event.path);
+  lr.changed({ body: { files: [fileName] } });
+}

package.json

@@ -4,7 +4,7 @@
   "description": "Experiment: how npmgraph could be implemented in declarative way?",
   "main": "main.js",
   "scripts": {
-    "start": "beefy index.js:bundle.js 9001",
+    "start": "gulp --port 31337",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "browserify": {
@@ -14,28 +14,37 @@
   },
   "keywords": [
     "npm",
-    "ngraph",
-    "sj"
+    "ngraph"
   ],
   "author": "Andrei Kashcha",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/anvaka/npmgraph.sj"
+    "url": "https://github.com/anvaka/npmgraph.an"
   },
   "devDependencies": {
-    "brfs": "~0.1.0",
-    "beefy": "^1.1.0"
+    "brfs": "^1.1.2",
+    "browserify": "^3.33.0",
+    "connect-livereload": "^0.3.2",
+    "express": "^3.5.1",
+    "gulp-concat": "^2.2.0",
+    "gulp-less": "^1.2.3",
+    "gulp-util": "^2.2.14",
+    "tiny-lr": "0.0.5",
+    "yargs": "^1.2.1",
+    "gulp": "^3.8.7"
   },
   "dependencies": {
-    "an": "~0.0.0",
+    "an": "0.0.6",
+    "angular": "^1.2.10",
     "ngraph.events": "0.0.3",
     "ngraph.graph": "0.0.2",
     "ngraph.svg": "0.0.3",
     "ngraph.three": "0.0.6",
     "npmgraphbuilder": "0.0.1",
     "simplesvg": "0.0.2",
     "three2stl": "0.0.1",
-    "typeahead.an": "~0.0.1"
+    "typeahead.an": "~0.0.1",
+    "twitter-bootstrap-3.0.0": "^3.0.0"
   }
 }

src/index.html

@@ -5,16 +5,13 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
     <title>Visualization of NPM dependencies</title>
-    <link rel="stylesheet" href="external/styles/bootstrap.min.css">
-    <link rel="stylesheet" href="external/styles/styles.css">
+    <link rel="stylesheet" href="styles/main.css">
   </head>
-
   <body>
     <navbar></navbar>
     <div ng-view class='full'></div>
 
-    <script type="text/javascript" charset="utf-8" src='external/angular.js'></script>
-    <script type="text/javascript" charset="utf-8" src='external/angular-route.js'></script>
+    <script type="text/javascript" charset="utf-8" src='external.min.js'></script>
     <script type="text/javascript" charset="utf-8" src='bundle.js'></script>
   </body>
 </html>

src/scripts/index.js

@@ -1,9 +1,10 @@
 // we need this to use navbar directive
-require('./lib/navbar/navbar');
+debugger;
+require('./navbar/navbar');
 
 // bootstrap angular application:
 npmVizApp = angular.module('npmViz', ['ngRoute']);
-npmVizApp.config(require('./lib/routes'));
+npmVizApp.config(require('./routes'));
 
 require('an').flush(npmVizApp);
 

src/styles/main.less

@@ -1,3 +1,12 @@
+@import "../../node_modules/twitter-bootstrap-3.0.0/less/bootstrap.less";
+
+navbar {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+}
+
 .typeahead-container ul {
   width: 300px;
   overflow: hidden;
@@ -7,13 +16,6 @@
   white-space: normal;
 }
 
-navbar {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1;
-}
-
 .search {
   width: 400px;
   margin: 15px 15px 15px 30px;
@@ -60,7 +62,7 @@ body,
   top: 50px;
   left: 20;
   width: 320px;
-  height: 200px
+  height: 200px;
   overflow-y: auto;
 }