Merge pull request #608 from node-red/build2

Add build process to grunt

.gitignore

@@ -8,4 +8,5 @@ nodes/node-red-nodes/
 /coverage
 .config.json
 .sessions.json
-
+public
+.dist

.travis.yml

@@ -3,7 +3,6 @@ before_install:
   - npm install -g npm@~1.4.18
 node_js:
   - "0.10"
-  - "0.8"
 script:
   - istanbul cover ./node_modules/.bin/grunt --report lcovonly && istanbul report text && ( cat coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js || true ) && rm -rf coverage
 before_script:

Gruntfile.js

@@ -1,5 +1,5 @@
 /**
- * Copyright 2013, 2014 IBM Corp.
+ * Copyright 2013, 2015 IBM Corp.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -14,11 +14,15 @@
  * limitations under the License.
  **/
 
+var path = require("path");
+ 
 module.exports = function(grunt) {
     
-    // Project configuration.
     grunt.initConfig({
         pkg: grunt.file.readJSON('package.json'),
+        paths: {
+            dist: ".dist"
+        },
         simplemocha: {
             options: {
                 globals: ['expect'],
@@ -49,7 +53,7 @@ module.exports = function(grunt) {
                 'red.js',
                 'red/**/*.js',
                 'nodes/**/*.js',
-                    'public/red/**/*.js'
+                'editor/js/**/*.js'
             ],
             
             core: {
@@ -68,7 +72,7 @@ module.exports = function(grunt) {
             },
             editor: {
                 files: {
-                        src: [ 'public/red/**/*.js' ]
+                    src: [ 'editor/js/**/*.js' ]
                 }
             },
             tests: {
@@ -79,17 +83,210 @@ module.exports = function(grunt) {
                     "expr": true
                 }
             }
+        },
+        concat: {
+            options: {
+                separator: ";",
+            },
+            build: {
+              src: [
+                  // Ensure editor source files are concatenated in
+                  // the right order
+                  "editor/js/main.js",
+                  "editor/js/settings.js",
+                  "editor/js/user.js",
+                  "editor/js/comms.js",
+                  "editor/js/ui/state.js",
+                  "editor/js/nodes.js",
+                  "editor/js/history.js",
+                  "editor/js/validators.js",
+                  "editor/js/ui/deploy.js",
+                  "editor/js/ui/menu.js",
+                  "editor/js/ui/keyboard.js",
+                  "editor/js/ui/tabs.js",
+                  "editor/js/ui/workspaces.js",
+                  "editor/js/ui/view.js",
+                  "editor/js/ui/sidebar.js",
+                  "editor/js/ui/palette.js",
+                  "editor/js/ui/tab-info.js",
+                  "editor/js/ui/tab-config.js",
+                  "editor/js/ui/editor.js",
+                  "editor/js/ui/clipboard.js",
+                  "editor/js/ui/library.js",
+                  "editor/js/ui/notifications.js",
+                  "editor/js/ui/subflow.js",
+                  "editor/js/ui/touch/radialMenu.js"
+              ],
+              dest: "public/red/red.js"
+            }
+        },
+        uglify: {
+            build: {
+                files: {
+                    'public/red/red.min.js': 'public/red/red.js'
+                }
+            }
+        },
+        sass: {
+            build: {
+                options: {
+                    outputStyle: 'compressed'
+                },
+                files: [{
+                    dest: 'public/red/style.min.css',
+                    src: 'editor/sass/style.scss'
+                }]
+            }
+        },
+        clean: {
+            build: {
+                src: [
+                    "public/red",
+                    "public/index.html",
+                    "public/favicon.ico",
+                    "public/icons",
+                    "public/vendor"
+                ]
+            },
+            release: {
+                src: [
+                    '<%= paths.dist %>'
+                ]
+            }
+        },
+        watch: {
+            js: {
+                files: [
+                    'editor/js/**/*.js'
+                ],
+                tasks: ['concat','uglify']
+            },
+            sass: {
+                files: [
+                    'editor/sass/**/*.scss'
+                ],
+                tasks: ['sass']
+            }
+        },
         
+        nodemon: {
+            /* uses .nodemonignore */
+            dev: {
+                script: 'red.js',
+                options: {
+                    args:['-v'],
+                    ext: 'js,html'
+                }
+            }
+        },
+        
+        concurrent: {
+            dev: {
+                tasks: ['nodemon', 'watch'],
+                options: {
+                    logConcurrentOutput: true
+                }
+            }
+        },
+        
+        copy: {
+            build: {
+                files:[{
+                    cwd: 'editor/images',
+                    src: '**',
+                    expand: true,
+                    dest: 'public/red/images/'
+                },
+                {
+                    cwd: 'editor/vendor',
+                    src: '**',
+                    expand: true,
+                    dest: 'public/vendor/'
+                },
+                {
+                    cwd: 'editor/icons',
+                    src: '**',
+                    expand: true,
+                    dest: 'public/icons/'
+                },
+                {
+                    expand: true,
+                    src: ['editor/index.html','editor/favicon.ico'],
+                    dest: 'public/',
+                    flatten: true
+                }]
+            },
+            release: {
+                files: [{
+                    expand: true,
+                    src: [
+                        '*.md',
+                        'LICENSE',
+                        'package.json',
+                        'settings.js',
+                        'red.js',
+                        'lib/.gitignore',
+                        'nodes/*.demo',
+                        'nodes/core/**',
+                        'red/**',
+                        'public/**'
+                    ],
+                    dest: path.resolve('<%= paths.dist %>/node-red-<%= pkg.version %>')
+                }]
+            }
+        },
+                
+        compress: {
+            release: {
+                options: {
+                    archive: '<%= paths.dist %>/node-red-<%= pkg.version %>.zip'
+                },
+                expand: true,
+                cwd: '<%= paths.dist %>/',
+                src: ['node-red-<%= pkg.version %>/**']
+            }
         }
     });
     
     grunt.loadNpmTasks('grunt-simple-mocha');
     grunt.loadNpmTasks('grunt-contrib-jshint');
+    grunt.loadNpmTasks('grunt-contrib-concat');
+    grunt.loadNpmTasks('grunt-contrib-uglify');
+    grunt.loadNpmTasks('grunt-contrib-clean');
+    grunt.loadNpmTasks('grunt-contrib-watch');
+    grunt.loadNpmTasks('grunt-concurrent');
+    grunt.loadNpmTasks('grunt-sass');
+    grunt.loadNpmTasks('grunt-nodemon');
+    grunt.loadNpmTasks('grunt-contrib-compress');
+    grunt.loadNpmTasks('grunt-contrib-copy');
     
-    grunt.registerTask('default', ['test-core','test-editor','test-nodes']);
+    grunt.registerTask('default',
+        'Builds editor content then runs code style checks and unit tests on all components',
+        ['build','test-core','test-editor','test-nodes']);
+    
+    grunt.registerTask('test-core',
+        'Runs code style check and unit tests on core runtime code',
+        ['jshint:core','simplemocha:core']);
+    
+    grunt.registerTask('test-editor',
+        'Runs code style check on editor code',
+        ['jshint:editor']);
+    
+    grunt.registerTask('test-nodes',
+        'Runs unit tests on core nodes',
+        ['simplemocha:nodes']);
+    
+    grunt.registerTask('build',
+        'Builds editor content',
+        ['clean:build','concat:build','uglify:build','sass:build','copy:build']);
+    
+    grunt.registerTask('dev',
+        'Developer mode: run node-red, watch for source changes and build/restart',
+        ['build','concurrent:dev']);
+    
+    grunt.registerTask('release',
+        'Create distribution zip file',
+        ['build','clean:release','copy:release','compress:release']);
 
-    grunt.registerTask('test-core', ['jshint:core','simplemocha:core']);
-    grunt.registerTask('test-editor', ['jshint:editor']);
-    grunt.registerTask('test-nodes', ['simplemocha:nodes']);
     
 };

README.md

@@ -25,6 +25,31 @@ More documentation can be found [here](http://nodered.org/docs).
 For further help, or general discussion, please use the
 [mailing list](https://groups.google.com/forum/#!forum/node-red).
 
+## Developers
+
+If you want to run the latest code from git, here's how to get started:
+
+1. Install grunt, the build tool
+
+        npm install -g grunt-cli
+
+2. Clone the code:
+
+        git clone git@github.com:node-red/node-red.git
+        cd node-red
+
+3. Install the node-red dependencies
+
+        npm install
+
+4. Build the code
+
+        grunt build
+
+5. Run
+
+        node red.js
+
 ## Contributing
 
 Before raising a pull-request, please read our

editor/index.html

@@ -4,7 +4,6 @@
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="mobile-web-app-capable" content="yes">
-
 <!--
   Copyright 2013, 2015 IBM Corp.
 
@@ -22,22 +21,22 @@
 -->
 <head>
 <title>Node-RED</title>
-<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
+<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
-<link href="jquery/css/smoothness/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" media="screen">
+<link href="vendor/jquery/css/smoothness/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" media="screen">
-<link rel="stylesheet" type="text/css" href="orion/built-editor.css"/>
+<link rel="stylesheet" type="text/css" href="vendor/orion/built-editor.css"/>
-<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css"/>
+<link rel="stylesheet" type="text/css" href="vendor/font-awesome/css/font-awesome.min.css"/>
-<link rel="stylesheet" href="style.css">
+<link rel="stylesheet" href="red/style.min.css">
 </head>
 <body spellcheck="false">
 <div id="header">
-    <span class="logo"><img src="node-red.png"> <span>Node-RED</span></span>
+    <span class="logo"><img src="red/images/node-red.png"> <span>Node-RED</span></span>
     <ul class="header-toolbar hide">
         <li><a id="btn-sidemenu" class="button" data-toggle="dropdown" href="#"><i class="fa fa-bars"></i></a></li>
     <ul>
 </div>
 <div id="main-container" class="sidebar-closed hide">
     <div id="palette">
-        <img src="spin.svg" class="palette-spinner hide"/>
+        <img src="red/images/spin.svg" class="palette-spinner hide"/>
         <div id="palette-container" class="palette-scroll">
         </div>
         <div id="palette-search">
@@ -170,39 +169,16 @@
     </div>
 </script>
 
-<script src="jquery/js/jquery-1.11.1.min.js"></script>
+<script src="vendor/jquery/js/jquery-1.11.1.min.js"></script>
-<script src="bootstrap/js/bootstrap.min.js"></script>
+<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
-<script src="jquery/js/jquery-ui-1.10.3.custom.min.js"></script>
+<script src="vendor/jquery/js/jquery-ui-1.10.3.custom.min.js"></script>
-<script src="jquery/js/jquery.ui.touch-punch.min.js"></script>
+<script src="vendor/jquery/js/jquery.ui.touch-punch.min.js"></script>
-<script src="marked/marked.min.js"></script>
+<script src="vendor/marked/marked.min.js"></script>
-<script src="orion/built-editor.min.js"></script>
+<script src="vendor/orion/built-editor.min.js"></script>
-<script src="ace/ace.js"></script>
+<script src="vendor/ace/ace.js"></script>
-<script src="ace/ext-language_tools.js"></script>
+<script src="vendor/ace/ext-language_tools.js"></script>
-<script src="d3.v3.min.js"></script>
+<script src="vendor/d3/d3.v3.min.js"></script>
-<script src="red/main.js"></script>
+<script src="red/red.min.js"></script>
-<script src="red/settings.js"></script>
-<script src="red/user.js"></script>
-<script src="red/comms.js"></script>
-<script src="red/ui/state.js"></script>
-<script src="red/nodes.js"></script>
-<script src="red/history.js"></script>
-<script src="red/validators.js"></script>
-<script src="red/ui/deploy.js"></script>
-<script src="red/ui/menu.js"></script>
-<script src="red/ui/keyboard.js"></script>
-<script src="red/ui/tabs.js"></script>
-<script src="red/ui/workspaces.js"></script>
-<script src="red/ui/view.js"></script>
-<script src="red/ui/sidebar.js"></script>
-<script src="red/ui/palette.js"></script>
-<script src="red/ui/tab-info.js"></script>
-<script src="red/ui/tab-config.js"></script>
-<script src="red/ui/editor.js"></script>
-<script src="red/ui/clipboard.js"></script>
-<script src="red/ui/library.js"></script>
-<script src="red/ui/notifications.js"></script>
-<script src="red/ui/subflow.js"></script>
-<script src="red/ui/touch/radialMenu.js"></script>
 
 </body>
 </html>

editor/js/ui/deploy.js

@@ -17,9 +17,9 @@
 RED.deploy = (function() {
         
     var deploymentTypes = {
-        "full":{img:"images/deploy-full-o.png"},
+        "full":{img:"red/images/deploy-full-o.png"},
-        "nodes":{img:"images/deploy-nodes-o.png"},
+        "nodes":{img:"red/images/deploy-nodes-o.png"},
-        "flows":{img:"images/deploy-flows-o.png"}
+        "flows":{img:"red/images/deploy-flows-o.png"}
     }
     
     var deploymentType = "full";
@@ -32,7 +32,7 @@ RED.deploy = (function() {
     function init() {
         
         var deployButton = $('<li><span class="deploy-button-group button-group">'+
-          '<a id="btn-deploy" class="action-deploy disabled" href="#"><img id="btn-icn-deploy" src="images/deploy-full-o.png"> <span>Deploy</span></a>'+
+          '<a id="btn-deploy" class="action-deploy disabled" href="#"><img id="btn-icn-deploy" src="red/images/deploy-full-o.png"> <span>Deploy</span></a>'+
           '<a id="btn-deploy-options"  data-toggle="dropdown"  class="" href="#"><i class="fa fa-caret-down"></i></a>'+
           '</span></li>').prependTo(".header-toolbar");
         
@@ -63,9 +63,9 @@ RED.deploy = (function() {
 
         RED.menu.init({id:"btn-deploy-options",
             options: [
-                {id:"btn-deploy-full",toggle:"deploy-type",icon:"images/deploy-full.png",label:"Full",sublabel:"Deploys everything in the workspace",onselect:function(s) { if(s){changeDeploymentType("full")}}},
+                {id:"btn-deploy-full",toggle:"deploy-type",icon:"red/images/deploy-full.png",label:"Full",sublabel:"Deploys everything in the workspace",onselect:function(s) { if(s){changeDeploymentType("full")}}},
-                {id:"btn-deploy-flow",toggle:"deploy-type",icon:"images/deploy-flows.png",label:"Modified Flows",sublabel:"Only deploys flows that contain changed nodes", onselect:function(s) {if(s){changeDeploymentType("flows")}}},
+                {id:"btn-deploy-flow",toggle:"deploy-type",icon:"red/images/deploy-flows.png",label:"Modified Flows",sublabel:"Only deploys flows that contain changed nodes", onselect:function(s) {if(s){changeDeploymentType("flows")}}},
-                {id:"btn-deploy-node",toggle:"deploy-type",icon:"images/deploy-nodes.png",label:"Modified Nodes",sublabel:"Only deploys nodes that have changed",onselect:function(s) { if(s){changeDeploymentType("nodes")}}}
+                {id:"btn-deploy-node",toggle:"deploy-type",icon:"red/images/deploy-nodes.png",label:"Modified Nodes",sublabel:"Only deploys nodes that have changed",onselect:function(s) { if(s){changeDeploymentType("nodes")}}}
             ]
         });
 

editor/sass/style.scss

@@ -17,7 +17,7 @@
 body {
   font: 13px "Helvetica" !important;
   padding-top: 100px;
-  background: url("pw_maze_white.png");
+  background: url("images/pw_maze_white.png");
 }
 
 #header {
@@ -501,7 +501,7 @@ span.deploy-button-group.open > #btn-deploy.disabled + a {
 }
 #sidebar-separator {
     width: 15px;
-    background: url(grip.png) no-repeat 50% 50%;
+    background: url(images/grip.png) no-repeat 50% 50%;
     position: absolute;
     right: 316px; top: 5px; bottom:10px;
     cursor: col-resize;
@@ -902,7 +902,7 @@ div.node-info {
 
 
 .dropdown-menu>li.disabled>a:hover>[class^="icon-"] {
-    background-image: url("bootstrap/img/glyphicons-halflings.png") !important;
+    background-image: url("vendor/bootstrap/img/glyphicons-halflings.png") !important;
 }
 /** Fix for unreachable dropdown menu **/
 .dropdown-menu  {
@@ -1189,7 +1189,7 @@ i.spinner {
     line-height: 14px;
     vertical-align: text-top;
     margin-top: 0px;
-    background: url(spin.svg) no-repeat 50% 50%;
+    background: url(images/spin.svg) no-repeat 50% 50%;
     background-size: contain
 }