gulp-advanced-file-include
Version:
an advanded gulp plugin for file include based on the work of coderhaoxin (coderhaoxin/gulp-file-include) and Bogdan Chadkin
192 lines (159 loc) • 3.23 kB
Markdown
[![NPM version][npm-img]][npm-url]
[![License][license-img]][license-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
index.html
```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
```html
<h1>view</h1>
```
var.html
```html
<label>@@name</label>
<label>@@age</label>
<strong>@@socials.fb</strong>
<strong>@@socials.tw</strong>
```
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
<!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
```html
<!DOCTYPE html>
<html>
<body>
@@include(markdown('view.md'))
@@include('./var.html', {
"name": "haoxin",
"age": 12345
})
</body>
</html>
```
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')
}
```
### `foreach` statement
```js
fileinclude({
context: {
buttons: {
"button1": {"text": "Cancel"},
"button2": {"text": "Submit"}
}
}
});
```
```
@@foreach (buttons) {
<button name="@@index">@@text</button>
}
```
### License
MIT
[npm-url]: https://npmjs.com/package/gulp-advanced-file-include
[npm-img]: https://img.shields.io/npm/v/gulp-advanced-file-include.svg?style=flat-square
[license-img]: http://img.shields.io/badge/license-MIT-green.svg?style=flat-square
[license-url]: http://opensource.org/licenses/MIT