haoxins · haoxins · Apr 4, 2017 · Mar 28, 2017 · Mar 31, 2017 · Mar 31, 2017
diff --git a/Readme.md b/Readme.md
@@ -227,6 +227,45 @@ data.json
 </body>
 ```
 
+### `webRoot` built-in context variable
+
+The `webRoot` field of the context contains the relative path from the source document to
+the source root (unless the value is already set in the context options).
+
+### example
+
+support/contact/index.html
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <link type=stylesheet src=@@webRoot/css/style.css>
+  </head>
+  <body>
+    <h1>Support Contact Info</h1>
+    <footer><a href=@@webRoot>Home</a></footer>
+  </body>
+  </body>
+</html>
+```
+
+and the result is:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <link type=stylesheet src=../../css/style.css>
+  </head>
+  <body>
+    <h1>Support Contact Info</h1>
+    <footer><a href=../..>Home</a></footer>
+  </body>
+  </body>
+</html>
+```
+
 ### License
 MIT
 

diff --git a/lib/index.js b/lib/index.js
@@ -29,7 +29,15 @@ module.exports = function(opts) {
     opts.basepath = opts.basepath === '@root' ? process.cwd() : path.resolve(opts.basepath);
   }
 
+  var customWebRoot = !!opts.context.webRoot;
+
   function fileInclude(file, enc, cb) {
+    if (!customWebRoot) {
+      // built-in webRoot variable, example usage: <link rel=stylesheet href=@@webRoot/style.css>
+      opts.context.webRoot =
+        path.relative(path.dirname(file.path), file.base).replace(/\\/g, '/') || '.';
+      }
+
     if (file.isNull()) {
       cb(null, file);
     } else if (file.isStream()) {

diff --git a/test/fixtures-webroot-variable/html-head.html b/test/fixtures-webroot-variable/html-head.html
@@ -0,0 +1,3 @@
+<head>
+  <link type=stylesheet src=@@webRoot/style.css>
+</head>
diff --git a/test/fixtures-webroot-variable/index.html b/test/fixtures-webroot-variable/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  @@include('html-head.html')
+  <body>
+    <h1>Page</h1>
+    <a href=@@webRoot/about>About</a>
+    @@include('sub/home-link.html')
+  </body>
+</html>
diff --git a/test/fixtures-webroot-variable/result.html b/test/fixtures-webroot-variable/result.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+  <link type=stylesheet src=../../style.css>
+</head>
+
+  <body>
+    <h1>Page</h1>
+    <a href=../../about>About</a>
+    <a href=../..>Home</a>
+
+  </body>
+</html>
diff --git a/test/fixtures-webroot-variable/sub/home-link.html b/test/fixtures-webroot-variable/sub/home-link.html
@@ -0,0 +1 @@
+<a href=@@webRoot>Home</a>
diff --git a/test/fixtures-webroot-variable/sub/index.html b/test/fixtures-webroot-variable/sub/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  @@include('../html-head.html')
+  <body>
+    <h1>Sub Page</h1>
+    <a href=@@webRoot/about>About</a>
+    @@include('home-link.html')
+  </body>
+</html>
diff --git a/test/fixtures-webroot-variable/sub/result.html b/test/fixtures-webroot-variable/sub/result.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+  <link type=stylesheet src=../../../style.css>
+</head>
+
+  <body>
+    <h1>Sub Page</h1>
+    <a href=../../../about>About</a>
+    <a href=../../..>Home</a>
+
+  </body>
+</html>
diff --git a/test/webroot-variable.js b/test/webroot-variable.js
@@ -0,0 +1,46 @@
+'use strict';
+
+const fileIncludePlugin = require('..');
+const gutil = require('gulp-util');
+const should = require('should');
+const fs = require('fs');
+
+describe('## built-in webRoot variable', () => {
+
+  it('# regular usage and includes', done => {
+    var result = fs.readFileSync('test/fixtures-webroot-variable/result.html', 'utf8');
+    var path = 'test/fixtures-webroot-variable/index.html';
+    var file = new gutil.File({ path: path, contents: fs.createReadStream(path) });
+
+    var stream = fileIncludePlugin();
+    stream.on('data', newFile => {
+      should.exist(newFile);
+      should.exist(newFile.contents);
+
+      String(newFile.contents).should.equal(result);
+      done();
+    });
+
+    stream.write(file);
+    stream.end();
+  });
+
+  it('# nested folder', done => {
+    var result = fs.readFileSync('test/fixtures-webroot-variable/sub/result.html', 'utf8');
+    var path = 'test/fixtures-webroot-variable/sub/index.html';
+    var file = new gutil.File({ path: path, contents: fs.createReadStream(path) });
+
+    var stream = fileIncludePlugin();
+    stream.on('data', newFile => {
+      should.exist(newFile);
+      should.exist(newFile.contents);
+
+      String(newFile.contents).should.equal(result);
+      done();
+    });
+
+    stream.write(file);
+    stream.end();
+  });
+
+});