4

What is the recommended way to link to CSS and JavaScript files from within an HTML template using gulp-file-include?

Example:

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>

The two index.html files are at different folder levels, so the relative path to the stylesheet in the link tag cannot be hardcoded (absolute paths have their own problems and are undesirable in this case).

Basically the first link tag needs to be something like:

<link rel=stylesheet href=style.css>

and the second something like:

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

Is there a convenient way in gulp-file-include to do this?

Note:
I currently have a workaround where I pass a variable as ".", "..", or "../.." into each @@include call, but that's cumbersome and brittle.

Dem Pilafian
  • 5,625
  • 6
  • 39
  • 67

1 Answers1

1

As no answer has been posted, here's my workaround:

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>


Update (April 2017):
The webRoot feature has been added to gulp-file-include.
https://github.com/coderhaoxin/gulp-file-include#webroot-built-in-context-variable

Dem Pilafian
  • 5,625
  • 6
  • 39
  • 67