a gulp plugin for file includes
npm install --save-dev gulp-file-includeconstfileinclude=require('gulp-file-include');Type: string
Default: '@@'
Type: object
Type: string
Default: '@@'
Type: string
Default: ''
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
Type: object
Default: false
Filters of include content.
Type: object
Default: {}
Context of if statement.
Type: boolean
Default: false
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
constfileinclude=require('gulp-file-include');constgulp=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>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
constfileinclude=require('gulp-file-include');constgulp=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>index.html
<!DOCTYPE html><html><body>
@@include(markdown('view.md'))
@@include('./var.html', {
"name": "haoxin",
"age": 12345
})
</body></html>view.md
view
====gulpfile.js
constfileinclude=require('gulp-file-include');constmarkdown=require('markdown');constgulp=require('gulp');gulp.task('fileinclude',function(){gulp.src(['index.html']).pipe(fileinclude({filters: {markdown: markdown.parse}})).pipe(gulp.dest('./'));});index.html
@@include('some.html', { "nav": true })
@@if (name === 'test' && nav === true) {
@@include('test.html')
}
gulpfile.js
fileinclude({context: {name: 'test'}});index.html
<ul>
@@for (var i = 0; i <arr.length;i++){<li>`+arr[i]+`</li>
}
</ul>gulpfile.js
fileinclude({context: {arr: ['test1','test2']}});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>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>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><linktype=stylesheetsrc=@@webRoot/css/style.css></head><body><h1>Support Contact Info</h1><footer><ahref=@@webRoot>Home</a></footer></body></body></html>result:
<!DOCTYPE html><html><head><linktype=stylesheetsrc=../../css/style.css></head><body><h1>Support Contact Info</h1><footer><ahref=../..>Home</a></footer></body></body></html>MIT