4 years ago

CSS & JS Files Not Being Loaded

Posted 4 years ago by shammadahmed

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">
    <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=""></script>
      <script src=""></script>


    <div class="container">
      <div class="header clearfix">
          <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>
        <h2 class="text-muted">Socket <small><em>Switcher</em></small></h2>

      <div class="jumbotron">




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

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

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

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) {
            paths.bootstrap + 'fonts/**',
            paths.fontAwesome + 'fonts/**'
        ], 'public/fonts')

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

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

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

Please sign in or create an account to participate in this conversation.