2016-09-09 20 views
3

gulp-file-includeを使用してHTMLテンプレート内のCSSおよびJavaScriptファイルにリンクするにはどうすればよいでしょうか?gulp-file-includeを使用したHTMLテンプレートからのファイルへの相対パス

例:

index.htmlを

@@include('templates/doc-begin.html') 
<h1>Welcome</h1> 
<p>Hello!</p> 
@@include('templates/doc-end.html') 

サポート/ index.htmlを

@@include('templates/doc-begin.html') 
<h1>Support</h1> 
<p>RTFM</p> 
@@include('templates/doc-end.html') 

テンプレート/ DOC-begin.html

<!doctype html> 
<html lang=en> 
<head> 
    <title>Website</title> 
    <link rel=stylesheet href=?????/style.css> 
</head> 
<body> 

2つのindex.htmlファイルは異なるフォルダレベルにあるため、linkタグのスタイルシートへの相対パスはハードコードできません(絶対パスには問題があり、この場合は望ましくありません)。

基本的には最初のlinkタグのようなものである必要があります:

<link rel=stylesheet href=style.css> 

など二何か:

<link rel=stylesheet href=../style.css> 

を行うには一気-ファイルが含まで便利な方法がありますこの?

注:
私は現在、私は"."".."、または各@@include呼び出しに"../.."として変数を渡すの回避策を持っているが、それは面倒と脆いです。

+0

機能のリクエスト: https://github.com/coderhaoxin/gulp-file-include/issues/115 –

答えて

0

何の答えが掲載されていないように、ここに私の回避策があります:

index.htmlを

@@include('templates/doc-begin.html', { "webRoot": "." }) 
<h1>Welcome</h1> 
<p>Hello!</p> 
@@include('templates/doc-end.html', { "webRoot": "." }) 

サポート/ index.htmlを

@@include('templates/doc-begin.html', { "webRoot": ".." }) 
<h1>Support</h1> 
<p>RTFM</p> 
@@include('templates/doc-end.html', { "webRoot": ".." }) 

テンプレート/ DOC- begin.html

<!doctype html> 
<html lang=en> 
<head> 
    <title>Website</title> 
    <link rel=stylesheet [email protected]@webRoot/style.css> 
</head> 
<body> 


アップデート(2017年4月):
webRoot機能がを一気-ファイルが含まに追加されました。
https://github.com/coderhaoxin/gulp-file-include#webroot-built-in-context-variable

+0

は私がプロジェクトをフォークと 'webRoot'機能を追加しました:https://github.com/ dpilafian/gulp-file-include#webroot-built-in-context-variable –

関連する問題