Node.js本地服务器css文件不';t注入
我的目录看起来是这样的:Node.js本地服务器css文件不';t注入,css,node.js,localhost,connect,Css,Node.js,Localhost,Connect,我的目录看起来是这样的: |-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
|-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
});
});
您可以使用快速框架来实现这一点
Var express=require(express);
var-app=express();
//现在,您可以在这里附加静态文件
app.use(“../example.css”,static(“/…example”)代码>
希望它能起作用。为了提供CSS、JS或资产等静态文件,您需要将它们添加到index.html
,服务器将负责提供您的资产。Gulp是一个任务运行程序,而不是服务器,因此您需要设置一个简单的HTTP服务器来为您的资产提供服务。您可以使用香草NodeJ构建HTTP服务器,但最简单的方法是使用。您的Express服务器
可能看起来像这样:
const express=require('express');
常量app=express();
//在public/build目录中提供静态文件
应用程序使用(快速静态('./构建');
//在端口3000上启动服务器
const server=app.listen(3000,函数(){
console.log('服务器已在上启动http://localhost:3000');
});代码>对于所有可能遇到我问题的人,这将是解决方案
.pipe(inject(gulp.src(['build/styles/all.css'], {read: false}), {ignorePath: 'build'} ))
打开web浏览器的开发工具,检查css文件的相对路径是否正确。原因是,随着进度,我将有许多css文件,所以我只需要通过*.css将它们全部插入