Skip to content

MAINTAINER WANTED ~ [gulp-file-include] a gulp plugin for file include

License

Notifications You must be signed in to change notification settings

haoxins/gulp-file-include

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

NPM version Build status Test coverage License Dependency status Gitter

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

About

MAINTAINER WANTED ~ [gulp-file-include] a gulp plugin for file include

Resources

License

Stars

Watchers

Forks

Packages

No packages published