Node.js 本地服务器 css 文件不注入答案

【问题标题】：Node.js local server css file doesn't injectNode.js 本地服务器 css 文件不注入
【发布时间】：2016-12-23 02:05:30
【问题描述】：

我的目录是这样的：

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

我将 css 文件注入：

gulp.task('index',function () {
return gulp.src('src/index.html')
    .pipe(inject(gulp.src(['http://localhost:5000/styles/all.css'], {read: false})))
    .pipe(gulp.dest('build'))
    .pipe(livereload());
})

我用 Node.js 设置了一个本地服务器，当我执行请求时，HTML 文件加载，但 .css 文件由于某种原因没有连接。

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

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

【问题讨论】：

打开浏览器的开发工具，检查css文件的相对路径是否正确。

标签： css node.js localhost connect

【解决方案1】：

您可以使用 express 框架来实现这一点

Var express=require (express); var app=express(); // Now here you can attach static files app.use("../example.css",static("/..example"));

希望它会起作用。

【讨论】：

【解决方案2】：

为了提供静态文件，例如 CSS、JS 或资产，您需要将它们添加到您的 index.html，并且您的服务器将负责提供您的资产。 Gulp 是一个任务运行器，而不是服务器，因此您需要设置一个简单的 HTTP 服务器来提供您的资产。您可以肯定地使用 vanilla Nodejs 构建 HTTP 服务器，但最简单的方法是使用 Express。您的 Express 服务器可能看起来像这样：

const express = require('express');
const app = express();

// serve static files in public/build directory
app.use(express.static('./build'));

// start the server on port 3000
const server = app.listen(3000, function() {
  console.log('Server started on http://localhost:3000');
});

然后在您的index.html 中确保使用链接标签链接您的 CSS 文件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Simple HTTP Server</title>
  <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
  <h1>Simple HTTP Server</h1>
</body>
</html>

【讨论】：

这样做的原因是，随着进度，我将拥有许多 css 文件，所以我只需要通过 *.css 将它们全部注入

【解决方案3】：

对于可能遇到我问题的每个人，这将是解决方案。

.pipe(inject(gulp.src(['build/styles/all.css'], {read: false}), {ignorePath: 'build'} ))

【讨论】：