Add Gulp & Angular to your Loopback project

add-gulp.sh

# cd to your Loopback project directory and run:
# curl https://gist.githubusercontent.com/bdunnette/4c1c7a153c70e8988fa48363f6b429d8/raw/add-gulp.sh | sh
REPO=https://gist.githubusercontent.com/bdunnette/4c1c7a153c70e8988fa48363f6b429d8/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
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 server/fixtures 
touch server/fixtures/.gitkeep
npm install --save loopback-component-fixtures loopback-component-explorer loopback-component-passport dotenv
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 font-awesome bootstrap angular-resource angular-ui-router angular-bootstrap angular-touch angular-animate angular-sanitize
git init && git add -A .

app.js

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

var app = angular.module('myApp', [
  'ui.router',
  'ui.bootstrap',
  'lbServices'
]);

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('/404');
}

bower.json

{
  "name": "myApp",
  "overrides": {
    "bootstrap": {
      "main": [
        "dist/css/bootstrap.css",
        "dist/js/bootstrap.min.js"
      ]
    },
    "font-awesome": {
      "main": [
        "css/font-awesome.css"
      ]
    },
    "angular-bootstrap": {
      "main": [
        "ui-bootstrap-csp.css",
        "ui-bootstrap-tpls.min.js"
      ]
    }
  }
}

component-config.json

{
  "loopback-component-explorer": {
    "mountPath": "/explorer"
  },
  "loopback-component-fixtures": {
    "loadFixturesOnStartup": true,
    "environments": [
      "test",
      "development"
    ],
    "fixturesPath": "/server/fixtures/"
  }
}

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

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>myApp</title>
  <!-- bower:css -->
  <!-- endbower -->
  <link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="vendor/angular-bootstrap/ui-bootstrap-csp.css" />
  <link rel="stylesheet" href="css/app.css">
</head>

<body ng-app="myApp">
  <div class="container">
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" ui-sref="home">myApp</a>
        </div>
        <div>
          <ul class="nav navbar-nav">
            <li>
              <a ui-sref="home">Home</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <ol class="breadcrumb">
      <li><a href="#">Home</a></li>
    </ol>
    <div ui-view></div>
  </div>
  <!-- bower:js -->
  <!-- endbower -->
  <script src="js/lb-services.js"></script>
  <script src="js/app.js"></script>
</body>