weaveworks · davkal · May 29, 2015 · May 29, 2015 · May 29, 2015 · May 29, 2015
@@ -37,14 +37,14 @@ $(APP_EXE) $(PROBE_EXE):
 	go get -tags netgo ./$(@D)
 	go build -ldflags "-extldflags \"-static\" -X main.version $(GIT_REVISION)" -tags netgo -o $@ ./$(@D)
 
-static: client/dist/scripts/bundle.js
-	esc -o app/static.go -prefix client/dist client/dist
+static: client/build/app.js
+	esc -o app/static.go -prefix client/build client/build
 
-client/dist/scripts/bundle.js: client/app/scripts/*
-	mkdir -p client/dist
+client/build/app.js: client/app/scripts/*
+	mkdir -p client/build
 	docker run -ti -v $(shell pwd)/client/app:/home/weave/app \
-		-v $(shell pwd)/client/dist:/home/weave/dist \
-		$(SCOPE_UI_BUILD_IMAGE) gulp build
+		-v $(shell pwd)/client/build:/home/weave/build \
+		$(SCOPE_UI_BUILD_IMAGE) gulp build --release
 
 client-test: client/test/*
 	docker run -ti -v $(shell pwd)/client/app:/home/weave/app \
@@ -62,7 +62,7 @@ $(SCOPE_UI_BUILD_EXPORT): client/Dockerfile client/gulpfile.js client/package.js
 
 clean:
 	go clean ./...
-	rm -rf $(SCOPE_EXPORT) $(SCOPE_UI_BUILD_EXPORT) client/dist
+	rm -rf $(SCOPE_EXPORT) $(SCOPE_UI_BUILD_EXPORT) client/build
 
 deps:
 	go get \

@@ -1,6 +1,2 @@
 node_modules
-dist
-.tmp
-.sass-cache
-bower_components
-test/bower_components
+build
@@ -14,6 +14,6 @@ RUN npm install -g gulp
 ADD package.json /home/weave/
 RUN npm install
 
-ADD gulpfile.js /home/weave/
+ADD gulpfile.js webpack.config.js .eslintrc /home/weave/
 
 # For instructions on running this container, consult the toplevel Makefile
@@ -2,7 +2,14 @@
 
 ## Getting Started
 
-- Install: `npm install`
-- Run `gulp` for building to the `dist` directory or `gulp serve` to serve the UI via a webserver
-- Develop using `gulp watch` for automatic code reload
+- Setup: `npm install`
+- Build: `gulp build --release`, output will be in `build/`
+- Develop: `gulp sync` and then open `http://localhost:3000/`
+
+To see a topology, `../app/app` needs to be running, as well as a probe.
+
+## Coding
+
+This directory has a `.eslintrc`, make sure your editor supports linter hints.
+To run a linter, you also run `gulp lint`.
 
@@ -5,14 +5,6 @@
     <title>Weave Scope</title>
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <!-- build:css styles/vendor.css -->
-    <!-- endbuild -->
-
-    <!-- build:css styles/main.css -->
-    <link rel="stylesheet" href="styles/main.css">
-    <!-- endbuild -->
-
   </head>
   <body>
     <!--[if lt IE 10]>
@@ -26,8 +18,6 @@
     <script>window.WS_URL = 'ws://localhost:4040';</script>
     <!-- @endif -->
 
-    <!-- build:js scripts/bundle.js -->
-    <script src="scripts/bundle.js"></script>
-    <!-- endbuild -->
+    <script src="app.js"></script>
   </body>
 </html>
@@ -1,3 +1,6 @@
+require('font-awesome-webpack');
+require('../styles/main.less');
+
 const React = require('react');
 
 const App = require('./components/app.js');

@@ -1,6 +1,5 @@
-@import "../../node_modules/material-ui/src/less/scaffolding";
-@import "../../node_modules/material-ui/src/less/components";
-@import "../../node_modules/font-awesome/less/font-awesome.less";
+@import "~material-ui/src/less/scaffolding.less";
+@import "~material-ui/src/less/components.less";
 
 @import url(http://fonts.googleapis.com/css?family=Roboto:300,400);
 

@@ -1,118 +1,113 @@
-
-const gulp = require('gulp');
-const connect = require('gulp-connect');
-const livereload = require('gulp-livereload');
-const babelify = require('babelify');
-const browserify = require('browserify');
-const del = require('del');
-const source = require('vinyl-source-stream');
-const vbuffer = require('vinyl-buffer');
-const reactify = require('reactify');
-
-// load plugins
-const $ = require('gulp-load-plugins')();
-
-var isDev = true;
-var isProd = false;
-
-gulp.task('styles', function() {
-  return gulp.src('app/styles/main.less')
-    .pipe($.if(isDev, $.sourcemaps.init()))
-    .pipe($.less())
-    .pipe($.autoprefixer('last 1 version'))
-    .pipe($.if(isDev, $.sourcemaps.write()))
-    .pipe($.if(isDev, gulp.dest('.tmp/styles')))
-    .pipe($.if(isProd, $.csso()))
-    .pipe($.if(isProd, gulp.dest('dist/styles')))
-    .pipe($.size())
-    .pipe(livereload());
-});
-
-gulp.task('scripts', function() {
-  const bundler = browserify('./app/scripts/main.js', {debug: isDev});
-  bundler.transform(reactify);
-  bundler.transform(babelify);
-
-  const stream = bundler.bundle();
-
-  return stream
-    .pipe(source('bundle.js'))
-    .pipe($.if(isDev, gulp.dest('.tmp/scripts')))
-    .pipe($.if(isProd, vbuffer()))
-    .pipe($.if(isProd, $.uglify()))
-    .on('error', $.util.log)
-    .pipe($.if(isProd, gulp.dest('dist/scripts')))
-    .pipe(livereload());
-});
-
-gulp.task('html', ['styles', 'scripts'], function() {
-  return gulp.src('app/*.html')
-    .pipe($.preprocess())
-    .pipe(gulp.dest('dist'))
-    .pipe($.size())
-    .pipe(livereload());
-});
-
-gulp.task('images', function() {
-  return gulp.src('app/images/**/*')
-    .pipe(gulp.dest('dist/images'))
-    .pipe($.size());
-});
-
-gulp.task('fonts', function() {
-  return gulp.src('node_modules/font-awesome/fonts/*')
+/*
+ * Gulpfile based on https://github.com/kriasoft/react-starter-kit
+ */
+
+'use strict';
+
+var gulp = require('gulp');
+var $ = require('gulp-load-plugins')();
+var del = require('del');
+var path = require('path');
+var runSequence = require('run-sequence');
+var webpack = require('webpack');
+var argv = require('minimist')(process.argv.slice(2));
+
+var watch = false;
+var browserSync;
+
+// The default task
+gulp.task('default', ['build']);
+
+// Clean output directory
+gulp.task('clean', del.bind(
+  null, ['.tmp', 'build/*'], {dot: true}
+));
+
+// 3rd party libraries
+gulp.task('vendor', function() {
+  return gulp.src('node_modules/font-awesome/fonts/**')
     .pipe($.filter('**/*.{eot,svg,ttf,woff,woff2}'))
-    .pipe($.flatten())
-    .pipe($.if(isDev, gulp.dest('.tmp/fonts')))
-    .pipe($.if(isProd, gulp.dest('dist/fonts')))
-    .pipe($.size());
+    .pipe(gulp.dest('build/fonts'));
 });
 
-gulp.task('extras', function() {
-  return gulp.src(['app/*.*', '!app/*.html'], { dot: true })
-    .pipe(gulp.dest('dist'));
+// Favicon
+gulp.task('favicon', function() {
+  return gulp.src(['app/favicon.ico'])
+    .pipe(gulp.dest('build'));
 });
 
-gulp.task('clean', function() {
-  return del(['.tmp', 'dist']);
-});
 
+// Static files
+gulp.task('html', function() {
+  var release = !!argv.release;
 
-gulp.task('lint', function() {
-  return gulp.src(['app/**/*.js'])
-    // eslint() attaches the lint output to the eslint property
-    // of the file object so it can be used by other modules.
-    .pipe($.eslint())
-    // eslint.format() outputs the lint results to the console.
-    // Alternatively use eslint.formatEach() (see Docs).
-    .pipe($.eslint.format())
-    // To have the process exit with an error code (1) on
-    // lint error, return the stream and pipe to failOnError last.
-    .pipe($.eslint.failOnError());
+  return gulp.src('app/*.html')
+    .pipe($.changed('build'))
+    .pipe($.if(release, $.preprocess()))
+    .pipe(gulp.dest('build'))
+    .pipe($.size({title: 'html'}));
 });
 
-gulp.task('production', ['html', 'images', 'fonts', 'extras']);
+// Bundle
+gulp.task('bundle', function(cb) {
+  var started = false;
+  var config = require('./webpack.config.js');
+  var bundler = webpack(config);
+  var verbose = !!argv.verbose;
+
+  function bundle(err, stats) {
+    if (err) {
+      throw new $.util.PluginError('webpack', err);
+    }
+
+    console.log(stats.toString({
+      colors: $.util.colors.supportsColor,
+      hash: verbose,
+      version: verbose,
+      timings: verbose,
+      chunks: verbose,
+      chunkModules: verbose,
+      cached: verbose,
+      cachedAssets: verbose
+    }));
+
+    if (!started) {
+      started = true;
+      return cb();
+    }
+  }
+
+  if (watch) {
+    bundler.watch(200, bundle);
+  } else {
+    bundler.run(bundle);
+  }
+});
 
-gulp.task('build', function() {
-  isDev = false;
-  isProd = true;
-  gulp.start('production');
+// Build the app from source code
+gulp.task('build', ['clean'], function(cb) {
+  runSequence(['vendor', 'html', 'favicon', 'bundle'], cb);
 });
 
-gulp.task('default', ['clean'], function() {
-  gulp.start('build');
+// Build and start watching for modifications
+gulp.task('build:watch', function(cb) {
+  watch = true;
+  runSequence('build', function() {
+    gulp.watch('app/*.html', ['html']);
+    cb();
+  });
 });
 
-gulp.task('connect', function() {
-  const root = isProd ? ['dist'] : ['.tmp', 'app'];
-  connect.server({
-    root: root,
+// Launch a Node.js/Express server
+gulp.task('serve', ['build:watch'], function() {
+  $.connect.server({
+    root: ['build'],
     port: 4041,
     middleware: function() {
       return [(function() {
-        const url = require('url');
-        const proxy = require('proxy-middleware');
-        const options = url.parse('http://localhost:4040/api');
+        var url = require('url');
+        var proxy = require('proxy-middleware');
+        var options = url.parse('http://localhost:4040/api');
         options.route = '/api';
         return proxy(options);
       })()];
@@ -121,23 +116,48 @@ gulp.task('connect', function() {
   });
 });
 
-gulp.task('serve', ['connect', 'styles', 'scripts', 'fonts']);
-
-gulp.task('serve-build', function() {
-  isDev = false;
-  isProd = true;
+// Launch BrowserSync development server
+gulp.task('sync', ['serve'], function(cb) {
+  browserSync = require('browser-sync');
+
+  browserSync({
+    logPrefix: 'RSK',
+    // Stop the browser from automatically opening
+    open: false,
+    notify: false,
+    // Run as an https by setting 'https: true'
+    // Note: this uses an unsigned certificate which on first access
+    //       will present a certificate warning in the browser.
+    https: false,
+    // Informs browser-sync to proxy our Express app which would run
+    // at the following location
+    proxy: 'localhost:4041'
+  }, cb);
+
+  process.on('exit', function() {
+    browserSync.exit();
+  });
 
-  // use local WS api
-  gulp.src('app/*.html')
-    .pipe($.preprocess({context: {DEBUG: true} }))
-    .pipe(gulp.dest('dist'));
+  gulp.watch('build/**/*.*', browserSync.reload);
 
-  gulp.start('connect');
+  // FIX this part to only reload styles parts that changed
+  // gulp.watch(['build/**/*.*'].concat(
+  //   src.server.map(function(file) { return '!' + file; })
+  // ), function(file) {
+  //   browserSync.reload(path.relative(__dirname, file.path));
+  // });
 });
 
-gulp.task('watch', ['serve'], function() {
-  livereload.listen();
-  gulp.watch('app/styles/**/*.less', ['styles']);
-  gulp.watch('app/scripts/**/*.js', ['scripts']);
-  gulp.watch('app/images/**/*', ['images']);
+// Lint
+gulp.task('lint', function() {
+  return gulp.src(['app/**/*.js'])
+    // eslint() attaches the lint output to the eslint property
+    // of the file object so it can be used by other modules.
+    .pipe($.eslint())
+    // eslint.format() outputs the lint results to the console.
+    // Alternatively use eslint.formatEach() (see Docs).
+    .pipe($.eslint.format())
+    // To have the process exit with an error code (1) on
+    // lint error, return the stream and pipe to failOnError last.
+    .pipe($.eslint.failOnError());
 });