styles dont connect when loading local server

Question

my dir looks like that :

|-project
   -gulpfile.js  
   |-build
     -index.html
     |-js
       -app.min.js
       -vendors.min.js
     |-styles
       -all.css
       -vendors.min.css

i inject the css and js files with this gulp task:

gulp.task('index',function () {
return gulp.src('src/index.html')
    .pipe(inject(gulp.src(['**/vendors.min.css','**/vendors.min.js','**/app.min.js','**/all.css'], {read: false})))
    .pipe(gulp.dest('build'))
    .pipe(livereload());
})

i set up a local server with node.js,when i do the request , the html file loads up,but the .js and .css files dont connect for some reason.Although when i check page's source code at output their paths are written in.

 <!-- inject:css -->
<link rel="stylesheet" href="/build/styles/vendors.min.css">
<link rel="stylesheet" href="/build/styles/all.css">
<!-- endinject -->

when i hover on one of them it shows :

 http://localhost:5000/build/styles/all.css

i use this task for setting the server :

gulp.task('connect', function() {
 connect.server({
   root: 'build',
   livereload: true,
    port: 5000
 });
});

EDIT

any recommendation about how to make it on hovering look like

localhost:5000/styles/all.css 

Answer 1

If the build folder is the root of the server, you shouldn't be including it in the path of the js and css files. This is failing because you are trying to reference a build folder inside the build folder.

Change your injection of css to the following:

<link rel="stylesheet" href="styles/vendors.min.css">
<link rel="stylesheet" href="styles/all.css">