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

x9ybnkn6  于 2023-05-27  发布在  Gulp
关注(0)|答案(1)|浏览(167)

我的dir看起来是这样的:

|-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
nwnhqdif

nwnhqdif1#

如果build文件夹是服务器的根目录,则不应将其包含在js和css文件的路径中。此操作失败,因为您正在尝试引用生成文件夹中的生成文件夹。
将css的注入更改为:

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

相关问题