Develop.js is a development mode script that allows gulp-angular projects to report errors in JS and SASS to the user via the web browser, instead of the terminal. I have used colons to delimit folders - there are two, /develop and /develop/templates.

develop.js

var LR_PORT= 35730;

var express = require('express');
var gulp = require('gulp');
var app = express();
var livereload = require('livereload');
var proxy = require('http-proxy').createProxyServer({ target : 'http://localhost:3000/api' , toProxy : true , prependPath : true });

// needs:
// we need to recompile HTML file every time the JS file list changes
// we need to recompile SASS every time a scss file changes, and update the css file.
// we need to reload every time JS file changes (without recompiling HTML)

// HTML injection

var index_html = require('./develop/html');

app.set('view engine', 'ejs');
app.set('views',__dirname+'/develop/templates')
app.get('/',index_html);
app.use(require('./develop/styles'));
app.use(express.static('src'));
app.use('/bower_components/',express.static('bower_components'));
app.use('/app/fonts',express.static('bower_components/foundation-icon-fonts'));
app.use('/videogular',express.static('bower_components/videogular-themes-default/fonts'));
app.use('/api',function(req,res) {
  return proxy.web(req,res); } );

app.listen(8101);

livereload = livereload.createServer( { port: LR_PORT } );

var watch = require('node-watch');

watch(
  ['src','bower_components'],
  function(filename) {
    console.log("Changed: ",filename);
    if(filename.match(/\.html$/) || filename.match(/\.js$/)) {
      console.log("Refershing everyging");
      livereload.refresh('/');
    }
    if(filename.match(/\.scss$/)) {
      console.log("refreshing only index.css");
      livereload.refresh('app/index.css');
    }
  }
);

develop:html.js

var gulp = require('gulp');

var $ = require('gulp-load-plugins')();

var wiredep = require('wiredep').stream;
var src = 'src/'
var sendTo = require('./sendTo');

var paths = { src : "src" };
var File = require('vinyl');
var plumber = require('gulp-plumber');

module.exports = function index_html(req,res) {
  var injectStyles = gulp.src([
    'src/app/app.css',
    'src/app/vendor.css'
  ]);

  var injectScripts = gulp.src([
      'http://core.yogitunes.com:35730/livereload.js?snipver=1',
    src + '/{app,components}/**/*.js',
    '!' + src + '/{app,components}/**/*.spec.js',
    '!' + src + '/{app,components}/**/*.mock.js'
  ]).pipe($.angularFilesort()).
    on('error',function(err) {
         console.log("Error happened, that's OK.");
         
         var err_msg = err.message.match(/^\s*(.*?)\s*$/)[1];
         res.render('js_error.html.ejs',{ err_msg : err_msg });

         this.emit('end');
       });

  var injectOptions = {
    ignorePath: [src],
    addRootSlash: false
  };

  var wiredepOptions = {
    directory: 'bower_components',
    ignorePath: '../',
    exclude: [/foundation\.js/, /foundation\.css/, /bootstrap\.css/, /foundation\.css/,/ionicons\.css/,/videogular\.css/,/intro\.js/]
  };

  return gulp.src(src + '/index.html')
    .pipe(plumber({
                    errorHandler : function(err) {
                      console.log("OMg dudes.");
                      var err_msg = err.message;
                      res.write(err_msg);
                      res.end();
                    }
                  }
                 ))
    .pipe($.inject(injectStyles, injectOptions))
    .pipe($.inject(injectScripts, injectOptions))
    .pipe(wiredep(wiredepOptions))
    // .pipe(gulp.dest(tmp + '/serve'))
    .on('error',function(err) {
          console.log("OMgwtf : ",err);
          this.emit('end');
        })
    .pipe(sendTo(res));
}

develop:sendTo.js

var through = require('through');

// create a stream that reads gulp File objects and outputs their contents
module.exports = function sendTo(res) {
  return through(
    function write(data) {    // this will be called once for each file
      res.write(data.contents);
    },
    function end() {    // this will be called when there are no more files
      res.end()
    }
  );
}

develop:styles.js

'use strict';

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var sendTo = require('./sendTo');
var fs = require('vinyl-fs');
var paths = { src : "src" };
var File = require('vinyl');
var plumber = require('gulp-plumber');

  var sassOptions = {
    style: 'expanded',
  };

  var injectFiles = gulp.src([
    paths.src + '/{app,components}/**/*.scss',
    '!' + paths.src + '/app/index.scss',
    '!' + paths.src + '/app/vendor.scss'
  ], { read: false });

  var injectOptions = {
    transform: function(filePath) {
      filePath = filePath.replace(paths.src + '/app/', '');
      filePath = filePath.replace(paths.src + '/components/', '../components/');
      return '@import \'' + filePath + '\';';
    },
    starttag: '// injector',
    endtag: '// endinjector',
    addRootSlash: false
  };

  var indexFilter = $.filter('index.scss');

var express = require('express')
var styles = express();

styles.set('view engine', 'ejs');
styles.set('views',__dirname+'/templates')

function doit(path,source) {
  styles.get(path,function(req,res) {
    var error = false;
    console.log("GEtting req",req.path);
    fs.src([ source ])
      .pipe(plumber({
        errorHandler : function(err) {
          var match = err.message.match(/^\s*(.*?)\s*$/);
          var err_msg = err.message.replace(/(\n|\r)/gim,"\A");
          styles.render('css_error.css.ejs',{ err_msg : err_msg },function(err,str) {
            res.write(str);
            res.end();
          });
        }
      })
           )
//      .pipe(indexFilter)
//      .pipe($.inject(injectFiles,injectOptions))
    //      .pipe(indexFilter.restore())
      .pipe($.sass(sassOptions))
     .pipe($.autoprefixer())
      .pipe(sendTo(res));
  });
}

doit('/app/vendor.css',paths.src+'/app/vendor.scss');
doit('/app/index.css',paths.src+'/app/index.scss');

module.exports = styles;

develop:templates:css_error.css.ejs

body {
  background-color: #efa;
}

body:before {
  content: "<%= err_msg %>'";
  color: black;
  background-color: #EEE;
  padding: 2em;
  border: 1px thin black;
  z-index: 100000;
  position: fixed;
  top: 10px;
  left: 10px;
  display: block;
}

develop:templates:js_error.html.ejs

<script src="http://localhost:35730/livereload.js?snipver=1"></script>

A javascript error occurred:

<%= err_msg %>

package.json

{
  "name": "admin",
  "version": "0.0.0",
  "dependencies": {},
  "devDependencies": {
    "browser-sync": "~1.7.1",
    "chalk": "~0.5.1",
    "connect-livereload": "^0.5.2",
    "del": "~0.1.3",
    "ejs": "^2.2.4",
    "express": "^4.11.2",
    "gulp": "~3.8.10",
    "gulp-angular-filesort": "~1.0.4",
    "gulp-angular-templatecache": "~1.4.2",
    "gulp-autoprefixer": "~2.0.0",
    "gulp-consolidate": "~0.1.2",
    "gulp-csso": "~0.2.9",
    "gulp-filter": "~1.0.2",
    "gulp-flatten": "~0.0.4",
    "gulp-inject": "~1.0.2",
    "gulp-jshint": "~1.9.0",
    "gulp-karma": "~0.0.4",
    "gulp-load-plugins": "~0.7.1",
    "gulp-minify-html": "~0.1.7",
    "gulp-ng-annotate": "~0.3.6",
    "gulp-plumber": "^0.6.6",
    "gulp-protractor": "~0.0.11",
    "gulp-rename": "~1.2.0",
    "gulp-replace": "~0.5.0",
    "gulp-rev": "~2.0.1",
    "gulp-rev-replace": "~0.3.1",
    "gulp-sass": "~1.1.0",
    "gulp-size": "~1.1.0",
    "gulp-uglify": "~1.0.1",
    "gulp-useref": "~1.0.2",
    "http-proxy": "~1.7.0",
    "jshint-stylish": "~1.0.0",
    "karma-jasmine": "~0.3.1",
    "karma-phantomjs-launcher": "~0.1.4",
    "livereload": "^0.3.6",
    "main-bower-files": "~2.4.0",
    "node-watch": "^0.3.4",
    "protractor": "~1.4.0",
    "require-dir": "~0.1.0",
    "through": "^2.3.6",
    "uglify-save-license": "~0.4.1",
    "vinyl": "^0.4.6",
    "vinyl-fs": "^0.3.13",
    "wiredep": "~2.2.0"
  },
  "engines": {
    "node": ">=0.10.0"
  }
}