[![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 plugin of gulp for file include
### install
```bash
npm install gulp-file-include
```
### options
* options - type: `string`, just as prefix, default `@@`, and basepath is default `@file`
```js
fileinclude('@@')
```
* options - type: `object`
- prefix: `string`, default `@@`
- suffix: `string`, default `''`
- basepath: `string`, default `@file`, it could be `@root`, `@file`, `your-basepath`
- filters: `object`, filters of include content
- context: `object`, context of `if` statement
- indent: `boolean`, default `false`
* options.basepath - type: `string`, it could be
- `@root`, include file relative to the dir where `gulp` running in
- `@file`, include file relative to the dir where `file` in [example](example)
- `your-basepath` include file relative to the basepath you give
```js
fileinclude({
prefix: '@@',
basepath: '@file'
})
```
```js
fileinclude({
prefix: '@@',
basepath: '/home/'
})
```
### example
* @@include options - type: `JSON`
index.html
```html
@@include('./view.html')
@@include('./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
var fileinclude = require('gulp-file-include'),
gulp = require('gulp');
gulp.task('fileinclude', function() {
gulp.src(['index.html'])
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('./'));
});
```
and the result is:
```html
view
haoxin
12345
facebook.com/include
twitter.com/include
```
### filters
```html
@@include(markdown('view.md'))
@@include('./var.html', {
"name": "haoxin",
"age": 12345
})
```
view.md
```html
view
====
```
```js
var fileinclude = require('gulp-file-include'),
markdown = require('markdown'),
gulp = require('gulp');
gulp.task('fileinclude', function() {
gulp.src(['index.html'])
.pipe(fileinclude({
filters: {
markdown: markdown.parse
}
}))
.pipe(gulp.dest('./'));
});
```
### `if` statement
```js
fileinclude({
context: {
name: 'test'
}
});
```
```
@@include('some.html', { "nav": true })
@@if (name === 'test' && nav === true) {
@@include('test.html')
}
```
### `for` statement
```js
fileinclude({
context: {
arr: ['test1', 'test2']
}
});
```
```html
@@for (var i = 0; i < arr.length; i++) {
`+arr[i]+`
}
```
### `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).
### example
support/contact/index.html
```html
Support Contact Info