# gulp-file-include
> A gulp plugin for file include
Latest version **2.3.0** (published 2020-12-20) · MIT license · 0 weekly downloads
## Install
```sh
npm install gulp-file-include
pnpm add gulp-file-include
yarn add gulp-file-include
bun add gulp-file-include
```
## Health
**Score 23/100 (F)** — status: abandoned.
Positive: has types package; no vulnerabilities; high quality score.
Warnings: low downloads; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 2.3.0 |
| Published | 2020-12-20 |
| First published | 2014-01-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/gulp-file-include) |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 20.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 676 |
| Author | haoxin |
| Maintainers | coderhaoxin, trysound, haoxins |
| Keywords | gulpplugin, file, include, replace, gulp, plugin |
## Links
- npm: https://www.npmjs.com/package/gulp-file-include
- Repository: https://github.com/haoxins/gulp-file-include
- Homepage: https://github.com/haoxins/gulp-file-include#readme
- Issues: https://github.com/haoxins/gulp-file-include/issues
- npm.io page: https://npm.io/package/gulp-file-include
## Dependencies (8)
- [json5](https://npm.io/package/json5.md) ^2.1.3
- [vinyl](https://npm.io/package/vinyl.md) ^2.2.1
- [extend](https://npm.io/package/extend.md) ^3.0.2
- [flatnest](https://npm.io/package/flatnest.md) ^1.0.0
- [through2](https://npm.io/package/through2.md) ^4.0.2
- [plugin-error](https://npm.io/package/plugin-error.md) ^1.0.1
- [concat-stream](https://npm.io/package/concat-stream.md) ^2.0.0
- [balanced-match](https://npm.io/package/balanced-match.md) ^1.0.0
## Alternatives
- [unionfs](https://npm.io/package/unionfs.md) — 2.2M weekly downloads
- [path-starts-with](https://npm.io/package/path-starts-with.md) — 35.9K weekly downloads
- [redzip](https://npm.io/package/redzip.md) — 1.2K weekly downloads
- [vscode-anymatch](https://npm.io/package/vscode-anymatch.md) — 848 weekly downloads
- [@ledgerhq/coin-filecoin](https://npm.io/package/@ledgerhq/coin-filecoin.md) — 793 weekly downloads
## Recent versions
- 2.3.0 (latest) — 2020-12-20
- 2.2.2 — 2020-04-24
- 2.2.1 — 2020-04-24
- 2.2.0 — 2020-04-24
- 2.1.1 — 2019-11-01
- 2.1.0 — 2019-07-24
- 2.0.1 — 2018-01-05
- 2.0.0 — 2017-12-03
- 1.2.0 — 2017-08-24
- 1.1.0 — 2017-04-04
- 1.0.0 — 2016-09-27
- 0.14.0 — 2016-07-31
- 0.13.7 — 2015-07-25
- 0.13.6 — 2015-07-24
- 0.13.5 — 2015-07-18
- … 28 more at https://npm.io/package/gulp-file-include/versions
## README
[![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