gulp-file-include

v2.3.0

Published

2 years ago

A gulp plugin for file include

Downloads

43,405

0High
0Medium
0Low

coderhaoxin

trysound

haoxins

gulpplugin file include replace gulp plugin

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>

License

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

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

@@include options - type: `JSON`

@@include_once options - type: `JSON`

`if` statement

`for` statement

`loop` statement

`loop` statement + `data.json`

`webRoot` built-in context variable