[![NPM version][npm-img]][npm-url]
[![Build status][travis-img]][travis-url]
[![Test coverage][coveralls-img]][coveralls-url]
[![License][license-img]][license-url]
[![Dependency status][david-img]][david-url]
[![Gitter][gitter-img]][gitter-url]
# gulp-file-include
a [gulp](https://github.com/gulpjs/gulp) plugin for file includes
## Installation
```bash
npm install --save-dev gulp-file-include
```
## API
```js
const fileinclude = require('gulp-file-include');
```
### fileinclude([prefix])
#### prefix
Type: `string`view
```
var.html
```html
@@name
@@age
@@socials.fb
@@socials.tw
```
gulpfile.js
```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:
```html
view
haoxin
12345
facebook.com/include
twitter.com/include
```
### @@include_once options - type: `JSON`
index.html
```html
@@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"
}
})
```
view.html
```html
view
```
var.html
```html
@@name
@@age
@@socials.fb
@@socials.tw
```
gulpfile.js
```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:
```html
view
haoxin
12345
facebook.com/include
twitter.com/include
```
### filters
index.html
```html
@@include(markdown('view.md'))
@@include('./var.html', {
"name": "haoxin",
"age": 12345
})
```
view.md
```html
view
====
```
gulpfile.js
```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
```js
fileinclude({
context: {
name: 'test'
}
});
```
### `for` statement
index.html
```html
@@for (var i = 0; i < arr.length; i++) {
`+arr[i]+`
}
```
gulpfile.js
```js
fileinclude({
context: {
arr: ['test1', 'test2']
}
});
```
### `loop` statement
index.html
```html
@@loop('loop-article.html', [
{ "title": "My post title", "text": "lorem ipsum...
" },
{ "title": "Another post", "text": "lorem ipsum...
" },
{ "title": "One more post", "text": "lorem ipsum...
" }
])
```
loop-article.html
```html
@@title
@@text
```
### `loop` statement + `data.json`
data.json
```js
[
{ "title": "My post title", "text": "lorem ipsum...
" },
{ "title": "Another post", "text": "lorem ipsum...
" },
{ "title": "One more post", "text": "lorem ipsum...
" }
]
```
loop-article.html
```html
@@loop("loop-article.html", "data.json")
```
### `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
```html
Support Contact Info