CODEWITHSUNDEEP
javascripthtmlcsstemplatesgulp
Dem Pilafian
Dem Pilafian

Reputation: 5976

Relative path to a file from an HTML template using gulp-file-include

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.

Upvotes: 4

Views: 1486

Answers (1)

Dem Pilafian
Dem Pilafian

Reputation: 5976

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

Upvotes: 1

Related Questions