gulp-file-include

a gulp plugin for file includes

Installation

npm install --save-dev gulp-file-include

API

const fileinclude = require('gulp-file-include');

fileinclude([prefix])

prefix

Type: string
Default: '@@'

fileinclude([options])

options

Type: object

options.prefix

Type: string
Default: '@@'

options.suffix

Type: string
Default: ''

options.basepath

Type: string
Default: '@file'

Possible values:

'@file': include file relative to the dir in which file resides (example)
'@root': include file relative to the dir in which gulp is running
path/to/dir: include file relative to the basepath you provide

options.filters

Type: object
Default: false

Filters of include content.

options.context

Type: object Default: {}

Context of if statement.

options.indent

Type: boolean Default: false

Examples

@@include options - type: `JSON`

index.html

<!DOCTYPE html>
<html>
  <body>
  @@include('./view.html')
  @@include('./var.html', {
    "name": "haoxin",
    "age": 12345,
    "socials": {
      "fb": "facebook.com/include",
      "tw": "twitter.com/include"
    }
  })
  </body>
</html>

view.html

<h1>view</h1>

var.html

<label>@@name</label>
<label>@@age</label>
<strong>@@socials.fb</strong>
<strong>@@socials.tw</strong>

gulpfile.js

const fileinclude = require('gulp-file-include');
const gulp = require('gulp');

gulp.task('fileinclude', function() {
  gulp.src(['index.html'])
    .pipe(fileinclude({
      prefix: '@@',
      basepath: '@file'
    }))
    .pipe(gulp.dest('./'));
});

result:

<!DOCTYPE html>
<html>
  <body>
  <h1>view</h1>
  <label>haoxin</label>
<label>12345</label>
<strong>facebook.com/include</strong>
<strong>twitter.com/include</strong>
  </body>
</html>

@@include_once options - type: `JSON`

index.html

<!DOCTYPE html>
<html>
  <body>
  @@include_once('./view.html')
  @@include_once('./var.html', {
    "name": "haoxin",
    "age": 12345,
    "socials": {
      "fb": "facebook.com/include",
      "tw": "twitter.com/include"
    }
  })
  @@include_once('./var.html', {
    "name": "haoxin",
    "age": 12345,
    "socials": {
      "fb": "facebook.com/include",
      "tw": "twitter.com/include"
    }
  })
  </body>
</html>

view.html

<h1>view</h1>

var.html

<label>@@name</label>
<label>@@age</label>
<strong>@@socials.fb</strong>
<strong>@@socials.tw</strong>

gulpfile.js

const fileinclude = require('gulp-file-include');
const gulp = require('gulp');

gulp.task('fileinclude', function() {
  gulp.src(['index.html'])
    .pipe(fileinclude({
      prefix: '@@',
      basepath: '@file'
    }))
    .pipe(gulp.dest('./'));
});

result:

<!DOCTYPE html>
<html>
  <body>
  <h1>view</h1>
  <label>haoxin</label>
<label>12345</label>
<strong>facebook.com/include</strong>
<strong>twitter.com/include</strong>

  </body>
</html>

filters

index.html

<!DOCTYPE html>
<html>
  <body>
  @@include(markdown('view.md'))
  @@include('./var.html', {
    "name": "haoxin",
    "age": 12345
  })
  </body>
</html>

view.md

view
====

gulpfile.js

const fileinclude = require('gulp-file-include');
const markdown = require('markdown');
const gulp = require('gulp');

gulp.task('fileinclude', function() {
  gulp.src(['index.html'])
    .pipe(fileinclude({
      filters: {
        markdown: markdown.parse
      }
    }))
    .pipe(gulp.dest('./'));
});

`if` statement

index.html

@@include('some.html', { "nav": true })

@@if (name === 'test' && nav === true) {
  @@include('test.html')
}

gulpfile.js

fileinclude({
  context: {
    name: 'test'
  }
});

`for` statement

index.html

<ul>
@@for (var i = 0; i < arr.length; i++) {
  <li>`+arr[i]+`</li>
}
</ul>

gulpfile.js

fileinclude({
  context: {
    arr: ['test1', 'test2']
  }
});

`loop` statement

index.html

<body>
  @@loop('loop-article.html', [
    { "title": "My post title", "text": "<p>lorem ipsum...</p>" },
    { "title": "Another post", "text": "<p>lorem ipsum...</p>" },
    { "title": "One more post", "text": "<p>lorem ipsum...</p>" }
  ])
</body>

loop-article.html

<article>
  <h1>@@title</h1>
  @@text
</article>

`loop` statement + `data.json`

data.json

[
  { "title": "My post title", "text": "<p>lorem ipsum...</p>" },
  { "title": "Another post", "text": "<p>lorem ipsum...</p>" },
  { "title": "One more post", "text": "<p>lorem ipsum...</p>" }
]

loop-article.html

<body>
  @@loop("loop-article.html", "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).

support/contact/index.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>

result:

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

gulp-file-include

Installation

API

fileinclude([prefix])

prefix

fileinclude([options])

options

options.prefix

options.suffix

options.basepath

options.filters

options.context

options.indent

Examples

@@include options - type: `JSON`

@@include_once options - type: `JSON`

filters

`if` statement

`for` statement

`loop` statement

`loop` statement + `data.json`

`webRoot` built-in context variable

License

Current Tags

43 Versions

gulp-file-include

Installation

API

fileinclude([prefix])

prefix

fileinclude([options])

options

options.prefix

options.suffix

options.basepath

options.filters

options.context

options.indent

Examples

@@include options - type: JSON

@@include_once options - type: JSON

filters

if statement

for statement

loop statement

loop statement + data.json

webRoot built-in context variable

License

Current Tags

43 Versions

@@include options - type: `JSON`

@@include_once options - type: `JSON`

`if` statement

`for` statement

`loop` statement

`loop` statement + `data.json`

`webRoot` built-in context variable