gulp-file-include
a gulp plugin for file includes
Installation
npm install --save-dev gulp-file-includeAPI
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 whichfileresides (example)'@root': include file relative to the dir in whichgulpis runningpath/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