CSS & JS Files Not Being Loaded

Everything works fine if I use a CDN. But when I try to use the elixir() function, it gets output the correct file ( http://localhost:8000/build/css/app-cd08e7f4.css ), But it gives a 404 error on the file ( Same is for JavaScript files ). Here is my view:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Hammad Ahmed">
    <link rel="icon" href="favicon.ico">

    <title>Socket Switcher</title>

    <link href="{{ elixir('css/app.css') }}" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <div class="container">
      <div class="header clearfix">
        <nav>
          <ul class="nav nav-pills pull-right">
            <li role="presentation" class="active"><a href="#">Home</a></li>
            <li role="presentation"><a href="#">About</a></li>
            <li role="presentation"><a href="#">Contact</a></li>
          </ul>
        </nav>
        <h2 class="text-muted">Socket <small><em>Switcher</em></small></h2>
      </div>

      <div class="jumbotron">

        @include('errors.flash')

        @yield('content')

      </div>

      <footer class="footer">
        <p>© Company {{ date('Y') }}</p>
      </footer>

    </div> <!-- /container -->


    <script src="{{ elixir('js/app.js') }}"></script>
  </body>
</html>

That's my Gulp.js file:


/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Less
 | file for our application, as well as publishing vendor resources.
 |
 */

var paths = {
    'jquery': 'bower_components/jquery/dist/',
    'bootstrap': 'bower_components/bootstrap/dist/',
    'fontAwesome': 'bower_components/font-awesome/',
    'semanticUi': 'bower_components/semantic-ui/dist/',
}

elixir(function(mix) {
    mix.copy([
            paths.bootstrap + 'fonts/**',
            paths.fontAwesome + 'fonts/**'
        ], 'public/fonts')

        .styles([
            paths.bootstrap + "css/bootstrap.css",
            paths.fontAwesome + "css/font-awesome.css",
            paths.semanticUi + "semantic.css",
        ], 'public/css/app.css', './')

        .scripts([
            paths.jquery + "jquery.js",
            paths.bootstrap + "js/bootstrap.js",
            paths.semanticUi + "semantic.js"
        ], 'public/js/app.js', './')

        .version(["css/app.css", "js/app.js"]);
});