加载本地服务器时样式不连接

Question

我的目录是这样的：

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

我用这个 gulp 任务注入 css 和 js 文件：

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

我用 node.js 设置了一个本地服务器，当我发出请求时，html 文件加载，但 .js 和 .css 文件由于某种原因没有连接。虽然当我在输出时检查页面的源代码时路径是写在里面的。

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

当我将鼠标悬停在其中一个上时，它会显示：

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

我使用这个任务来设置服务器：

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

编辑

任何关于如何使其悬停看起来像的建议

localhost:5000/styles/all.css 

Answer 1

如果 build 文件夹是服务器的根目录，则不应将其包含在 js 和 css 文件的路径中。这是失败的，因为您试图在构建文件夹中引用构建文件夹。

将您的 css 注入更改为以下内容：

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