2016-12-23 11 views
0

私のdirはそのように見える注入していない:私はノードでローカルサーバを設定Node.jsのローカルサーバの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()); 
}) 

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

私はとcssファイルを注入。 js、私は要求を行うと、HTMLファイルが読み込まれますが、.cssファイルは何らかの理由で接続しません。

私は、サーバーを設定するために、このタスクを使用します。

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

ウェブブラウザの開発ツールを開き、CSSファイルの相対パスが正しいかどうかを確認してください。 –

答えて

0

あなたはこの

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

を達成するために明示フレームワークを使用することができますが、それは動作します願っています。

0

CSS、JS、アセットなどの静的ファイルを配信するには、index.htmlに追加する必要があります。サーバーはアセットを配信する責任があります。 Gulpはサーバーではなくタスクランナーですから、単純なHTTPサーバーを設定して資産を提供する必要があります。バニラNodejを使用してHTTPサーバーを構築できますが、最も簡単な方法は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ファイルをリンクしてください:あなたのExpressサーバ は、次のようになります。私の問題が発生する可能性があります誰に

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

+0

それは自動的に追加されるべきであり、手動ではありません –

+0

その理由は進歩によって私はそれらをすべて* .cssで注入する必要があるので多くのCSSファイルを持つでしょう –

0

、それが解決策になります。

.pipe(inject(gulp.src(['build/styles/all.css'], {read: false}), {ignorePath: 'build'})) 
関連する問題