使用 gulp-file-include 从 HTML 模板到文件的相对路径答案

【问题标题】：Relative path to a file from an HTML template using gulp-file-include使用 gulp-file-include 从 HTML 模板到文件的相对路径
【发布时间】：2016-09-09 19:22:34
【问题描述】：

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

例子：

index.html

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

support/index.html

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

templates/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 调用，但这既麻烦又脆弱。

【问题讨论】：

功能请求：github.com/coderhaoxin/gulp-file-include/issues/115

标签： javascript html css templates gulp

【解决方案1】：

由于没有发布答案，这是我的解决方法：

index.html

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

support/index.html

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

templates/doc-begin.html

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

更新（2017 年 4 月）：
webRoot 功能已添加到 gulp-file-include。
https://github.com/coderhaoxin/gulp-file-include#webroot-built-in-context-variable

【讨论】：

我 fork 项目并添加了 webRoot 功能：github.com/dpilafian/…