Adding Grunt build process

.eslintignore

@@ -1,2 +1 @@
 client/bower_components
-node_modules

.eslintrc

@@ -1,14 +1,8 @@
 env:
-  browser: true
-  jquery: true
   node: true
 
-globals:
-  angular: false
-
 rules:
   global-strict: 0
-  no-alert: 1
   no-process-exit: 0
   no-shadow: 0
   no-new: 0

.travis.yml

@@ -5,3 +5,6 @@ node_js:
   - "0.12"
 
 sudo: false
+
+before_install:
+  - npm i -g grunt-cli

Gruntfile.js

@@ -0,0 +1,12 @@
+'use strict';
+
+module.exports = function (grunt) {
+
+  // require('load-grunt-tasks')(grunt);
+
+  grunt.initConfig({
+    pkg: require('./package.json')
+  });
+
+  grunt.loadTasks('grunttasks');
+};

README.md

@@ -10,6 +10,13 @@ Web dashboard for Loads, v2.
  * Define load profiles (container sets)
  * Control load test runs
 
+## Prerequisites
+
+Before you install loads-web, you'll need to have [Node.js](https://nodejs.org/) installed, as well as [Grunt](http://gruntjs.com/) and [Bower](http://bower.io/) modules installed globally:
+```sh
+$ npm install bower grunt-cli --global
+```
+
 
 ## Development
 
@@ -19,15 +26,15 @@ Setting the app up:
 $ npm install
 ```
 
-Watch and compile Stylus to CSS:
+Compile Stylus to CSS:
 
 ```sh
-$ ./node_modules/.bin/stylus --watch --compress client/static/assets/stylus/app.styl --out client/static/assets/css/
+$ grunt stylus
 ```
 
 Starting the server:
 ```sh
-$ node server # or `npm start`
+$ npm start
 ```
 
 

client/.eslintrc

@@ -0,0 +1,11 @@
+env:
+  browser: true
+  jquery: true
+  node: false
+
+globals:
+  angular: false
+
+rules:
+  no-alert: 1
+  no-console: 0

client/static/assets/stylus/app.styl

@@ -3,99 +3,110 @@
 */
 @import 'fonts.styl';
 
+
 /*
   Vars
 */
 $media-query-tablet = 768px;
 
-/* 
-  Site structure 
+
+/*
+  Site structure
 */
 body {
   background: #e9eaed;
-  
+
   > header {
     background: #c13832;
-    -webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, .52);
-    box-shadow: 0 2px 2px -2px rgba(0, 0, 0, .52);
+    -webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
+    box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
   }
 }
 
-.top-bar, .top-bar-section li:not(.has-form) a:not(.button), .top-bar-section ul li {
+.top-bar,
+.top-bar-section li:not(.has-form) a:not(.button),
+.top-bar-section ul li {
   background: none;
 }
 
 .top-bar .name h1 a {
   font-weight: bold;
 }
 
-.top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] {
+.top-bar-section > ul > .divider,
+.top-bar-section > ul > [role='separator'] {
   border-right-color: #ad0901;
 }
 
 nav.breadcrumbs {
   background: none;
+  border: 0;
   margin: 10px 0;
   padding: 0;
-  border: 0;
-
   position: absolute;
   right: 15px;
   top: 8px;
-  
+
   @media (max-width: $media-query-tablet) {
-      position: static;
-      margin-top: 20px;
-    }
+    margin-top: 20px;
+    position: static;
+  }
 }
 
 h2 .label {
-  float: right;
-  font-size: 1.3rem;
   background: transparent;
   color: #999;
+  float: right;
+  font-size: 1.3rem;
 }
 
 .two-column-row {
   display: -webkit-flex;
   display: flex;
   width: 100%;
-  
+
   @media (max-width: $media-query-tablet) {
-    display: block;  
+    display: block;
   }
-  
+
   > div {
     width: 50%;
-    
+
     @media (max-width: $media-query-tablet) {
+      float: none;
       width: 100%;
-      float: none; 
     }
-    
+
     &:first-child {
       margin-right: 20px;
-      
+
       @media (max-width: $media-query-tablet) {
+        margin-right: 0;
         width: auto;
-        margin-right: 0; 
       }
     }
   }
 }
 
-/* 
-  Tags 
+
+/*
+  Tags
 */
-body, h1, h2, h3, h4, h5, h6 {
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   color: #4d4e53;
   font-family: 'Open Sans', sans-serif;
 }
 
 h1 {
   color: #222;
   margin-top: 20px;
-  
+
   small {
     word-break: break-word;
   }
@@ -105,54 +116,55 @@ h2 {
   font-size: 1.5em;
 }
 
-/* 
-  Runs styles 
+
+/*
+  Runs styles
 */
 .run-table {
   width: 100%;
 
   h2 {
     margin-bottom: 0;
   }
-  
+
   caption {
     color: inherit;
     text-align: start;
   }
-  
+
   tbody td {
     border-bottom: 1px solid #eee;
   }
 }
 
 .lastUpdated {
-  display: block;
   color: #999;
-  margin-bottom: 10px;
-  font-weight: normal;
+  display: block;
   font-size: 70%;
+  font-weight: normal;
+  margin-bottom: 10px;
 }
 
 .run-result {
-  position: relative;
   padding-right: 40px;
-
+  position: relative;
+
   div {
-    font-size: 85%;
     display: inline-block;
+    font-size: 85%;
     margin-right: 8px;
   }
 }
 
 .run-result-icon {
   position: absolute;
-  top: 35%;
   right: 20px;
+  top: 35%;
 }
 
 a.run-link {
-  font-weight: bold;
   display: block;
+  font-weight: bold;
 }
 
 .success {
@@ -166,49 +178,52 @@ a.run-link {
 .success-text {
   color: green;
 }
+
 .danger-text {
   color: red;
 }
 
 table.details-table {
   width: 100%;
-  
+
   th {
     text-align: start;
   }
-  
-  tbody th[scope="row"] {
+
+  tbody th[scope='row'] {
     width: 10em;
   }
 }
 
+
 /*
   Projects Loader
 */
 .result-destination {
   display: none;
-
-  &.valid, &.error {
+
+  &.valid,
+  &.error {
     display: block;
   }
-  
+
   &.valid {
     .invalid-info {
       display: none;
     }
   }
-  
+
   &.error {
     .valid-info {
       display: none;
     }
   }
-  
+
   textarea {
     font-family: monospace;
     height: 200px;
   }
-  
+
   .invalid-info {
     color: #f00;
   }
@@ -219,8 +234,8 @@ table.details-table {
 }
 
 .gist-description {
-  font-style: italic;
   color: #777;
+  font-style: italic;
 }
 
 
@@ -229,8 +244,8 @@ table.details-table {
 */
 .button-group {
   button {
-    padding: .5rem 1rem;
     font-size: 90%;
+    padding: 0.5rem 1rem;
   }
 }
 
@@ -254,4 +269,4 @@ table.details-table {
 
 .project-list {
   width: 100%;
-}
+}