Question

使用gulp-file-include从HTML模板中链接到CSS和JavaScript文件的推荐方法是什么？

示例：

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

两个index.html文件位于不同的文件夹级别，因此link标记中样式表的相对路径无法进行硬编码（绝对路径有自己的问题，在这种情况下不合适）。

基本上，第一个link标记必须是：

<link rel=stylesheet href=style.css>

和第二个类似：

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

gulp-file-include 是否有方便的方法来执行此操作？

注意：
我目前有一种解决方法，我将"."，".."或"../.."变量传递给每个@@include调用，但这很麻烦而且很脆弱。

Answer 1

由于没有回复，这是我的解决方法：

<强>的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 href=@@webRoot/style.css>
</head>
<body>