add-gulp.sh

# cd to your Firebase project directory and run:
# curl https://gist.githubusercontent.com/bdunnette/258eafa8425e3b7c89dc873c73a5cc2d/raw/add-gulp.sh | sh
REPO=https://gist.githubusercontent.com/bdunnette/258eafa8425e3b7c89dc873c73a5cc2d/raw
echo public/vendor >> .gitignore
echo node_modules >> .gitignore
mkdir -p public/js public/css
touch public/css/app.css 
curl $REPO/gulpfile.js > gulpfile.js
curl $REPO/app.js > public/js/app.js
sed "s/myApp/${PWD##*/}/g" -i public/js/app.js
curl $REPO/index.html > public/index.html
sed "s/myApp/${PWD##*/}/g" -i public/index.html
echo {\"name\":\"${PWD##*/}\"\,\"main\":\"public/index.html\"\,\"description\":\"\"} > package.json
npm install --save-dev browser-sync gulp gulp-install wiredep
echo {\"directory\":\"public/vendor/\"} > .bowerrc
echo {\"name\":\"${PWD##*/}\"} > bower.json
bower install -S angular angular-ui-router angular-material angular-sanitize firebase angularfire
git init
git add -A .

app.js

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

var config = {
    // Insert your Firebase config here
};

firebase.initializeApp(config);

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

// app.config(function($mdThemingProvider) {
//     $mdThemingProvider.theme('default')
//         .primaryPalette('lime')
//         .accentPalette('orange');
// });

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);
                });
        }
    }
});

gulpfile.js

// Gulpfile.js
var gulp = require('gulp'),
    install = require("gulp-install"),
    wiredep = require('wiredep').stream,
    browserSync = require('browser-sync');

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

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

gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "./public"
        }
    });
});

gulp.task('js', function() {
    return gulp.src('public/**/*.js')
        // do stuff to JavaScript files
        //.pipe(uglify())
        //.pipe(gulp.dest('...'));
        .pipe(browserSync.reload({
            stream: true
        }));
});

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

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

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

index.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>myApp</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script>
        document.write('<base href="' + document.location + '" />');
    </script>
    <!-- bower:css -->
    <link rel="stylesheet" href="vendor/angular-material/angular-material.css"/>
    <!-- endbower -->
    <link href="//fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <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/app.js"></script>
</body>
</html>