add-gulp.sh

# cd to your Loopback project directory and run:
# curl https://gist.githubusercontent.com/bdunnette/a1854b4f0c5010cb7a539be5f2d63ef8/raw/add-gulp.sh | sh
REPO=https://gist.githubusercontent.com/bdunnette/a1854b4f0c5010cb7a539be5f2d63ef8/raw
echo client/vendor >> .gitignore
mv server/boot/root.js server/boot/root.js.bak
sed 's/\("files\".*\:.*{\)/&\"loopback\#static\"\:\{\"params\"\:\"\$\!\.\.\/client\"\}/' -i server/middleware.json
sed 's/\("compression\".*\:.*{\)/&\"enabled\":false/' -i server/middleware.json
mkdir -p client/js client/css server/fixtures
touch client/css/app.css server/fixtures/.gitkeep
wget -O gulpfile.js $REPO/gulpfile.js
wget -O server/component-config.json $REPO/component-config.json
wget -O client/js/app.js $REPO/app.js
sed "s/myApp/${PWD##*/}/g" -i client/js/app.js
wget -O client/index.html $REPO/index.html
sed "s/myApp/${PWD##*/}/g" -i client/index.html
wget -O bower.json $REPO/bower.json
sed "s/myApp/${PWD##*/}/g" -i bower.json
mkdir -p fixtures/data
wget -O fixtures/data/data.yml $REPO/data.yml
npm install --save event-stream loopback-fixtures loopback-component-explorer
npm install --save-dev browser-sync gulp gulp-install gulp-loopback-sdk-angular gulp-nodemon gulp-rename wiredep
echo {\"directory\":\"client/vendor/\"} > .bowerrc
bower install -S angular angular-resource angular-ui-router angular-sanitize angular-material angular-live-set
git init && git add -A .

app.js

function logMilestone(message) {
  console.log(" ================== " + message + " ================== ")
}

var app = angular.module('myApp', [
  'ui.router',
  'ngMaterial',
  'lbServices',
  'ls.LiveSet',
  'ls.ChangeStream'
]);

app.run(RunBlock);

RunBlock.$inject = ['$state', '$rootScope'];

function RunBlock($state, $rootScope) {
  // $state.go('home');
  $rootScope.$on('$stateChangeError', function $stateChangeError(event, toState,
    toParams, fromState, fromParams, error) {
    console.group();
    console.error('$stateChangeError', error);
    console.error(error.stack);
    console.info('event', event);
    console.info('toState', toState);
    console.info('toParams', toParams);
    console.info('fromState', fromState);
    console.info('fromParams', fromParams);
    console.groupEnd();
  });
}

app.config(ConfigBlock);

ConfigBlock.$inject = ['$stateProvider', '$urlRouterProvider'];

function ConfigBlock($stateProvider, $urlRouterProvider) {

    logMilestone("Config");

    var HomeState = {
        name: 'home',
        url: '/',
        template: '<ui-view></ui-view>'
    };

    $stateProvider.state('home', HomeState);
    $urlRouterProvider.otherwise('/');
}

app.controller('NavbarCtrl', function($scope, $firebaseAuth) {
    $scope.authObj = $firebaseAuth();
    $scope.firebaseUser = $scope.authObj.$getAuth();

    $scope.login = function(authType) {
        switch (authType) {
            case 'google':
            default:
                // login with Google
                $scope.authObj.$signInWithPopup(authType).then(function(firebaseUser) {
                    console.log("Signed in as:", firebaseUser.uid);
                    console.log($scope.authObj.$getAuth());
                }).catch(function(error) {
                    console.log("Authentication failed:", error);
                });
        }
    }
});

bower.json

{
  "name": "myApp"
}

component-config.json

{
  "loopback-component-explorer": {
    "mountPath": "/explorer"
  },
  "loopback-fixtures": {
    "fixturePath": "/fixtures/data/",
    "append": false,
    "autoLoad": false
  }
}

data.yml

User:
 user{1..10}:
   name: "{{name.firstName}} {{name.lastName}}"
   email: "{{internet.email}}"
   password: "{{internet.password}}"

gulpfile.js

// Gulpfile.js
var gulp = require('gulp'),
  nodemon = require('gulp-nodemon'),
  rename = require('gulp-rename'),
  loopbackAngular = require('gulp-loopback-sdk-angular'),
  install = require("gulp-install"),
  wiredep = require('wiredep').stream,
  browserSync = require('browser-sync');

gulp.task('lb-ng', function() {
  return gulp.src('./server/server.js')
    .pipe(loopbackAngular())
    .pipe(rename('lb-services.js'))
    .pipe(gulp.dest('./client/js'));
});

gulp.task('install', function() {
  return gulp.src(['./bower.json', './package.json'])
    .pipe(install());
});

gulp.task('index', function() {
  gulp.src('./client/index.html')
    .pipe(wiredep({
      // optional: 'configuration',
      // goes: 'here'
    }))
    .pipe(gulp.dest('./client'));
});

// we'd need a slight delay to reload browsers
// connected to browser-sync after restarting nodemon
var BROWSER_SYNC_RELOAD_DELAY = 500;

gulp.task('nodemon', function(cb) {
  var called = false;
  return nodemon({

      // nodemon our expressjs server
      script: 'server/server.js',

      // watch core server file(s) that require server restart on change
      watch: ['server/*', 'common/*']
    })
    .on('start', function onStart() {
      // ensure start only got called once
      if (!called) {
        cb();
      }
      called = true;
    })
    .on('restart', function onRestart() {
      // reload connected browsers after a slight delay
      setTimeout(function reload() {
        browserSync.reload({
          stream: false
        });
      }, BROWSER_SYNC_RELOAD_DELAY);
    });
});

gulp.task('browser-sync', ['nodemon'], function() {

  // for more browser-sync config options: http://www.browsersync.io/docs/options/
  browserSync({

    // informs browser-sync to proxy our expressjs app which would run at the following location
    proxy: 'http://localhost:3000',

    // informs browser-sync to use the following port for the proxied app
    // notice that the default port is 3000, which would clash with our expressjs
    port: 4000,

    // open the proxied app in chrome
    // browser: ['google-chrome']
  });
});

gulp.task('js', function() {
  return gulp.src('client/**/*.js')
    // do stuff to JavaScript files
    //.pipe(uglify())
    //.pipe(gulp.dest('...'));
});

gulp.task('css', function() {
  return gulp.src('client/**/*.css')
    .pipe(browserSync.reload({
      stream: true
    }));
});

gulp.task('bs-reload', function() {
  browserSync.reload();
});

gulp.task('default', ['install', 'index', 'lb-ng', 'browser-sync'], function() {
  gulp.watch('common/*', ['lb-ng', 'bs-reload']);
  gulp.watch('client/**/*.js', ['js', 'bs-reload']);
  gulp.watch('client/**/*.css', ['css']);
  gulp.watch('client/**/*.html', ['bs-reload']);
  gulp.watch('bower.json', ['install', 'index', 'bs-reload']);
});

index.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <title>myApp</title>
  <!-- bower:css -->
  <!-- endbower -->
  <link rel="stylesheet" href="css/app.css">
</head>

<body>
    <md-toolbar layout="row" ng-controller="NavbarCtrl">
        <h3>myApp</h3>
        <span flex></span>
        <md-button ng-if="!authObj.$getAuth().uid" ng-click="login('google')">
            Login
        </md-button>
        <md-button ng-if="authObj.$getAuth().uid" ng-click="authObj.$signOut()">
            {{authObj.$getAuth().displayName}}
        </md-button>
    </md-toolbar>
    <div flex layout="row">
        <md-content flex id="content" ui-view></md-content>
    </div>
    <!-- bower:js -->
    <!-- endbower -->
    <script src="js/lb-services.js"></script>
    <script src="js/app.js"></script>
</body>
</html>