gulp-file-include
Advanced tools
a plugin of gulp for file include
npm install gulp-file-include
string, just as prefix, default @@, and basepath is default @filefileinclude('@@')
options - type: object
string, default @@string, default ''string, default @file, it could be @root, @file, your-basepathobject, filters of include contentobject, context of if statementboolean, default falseoptions.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 exampleyour-basepath include file relative to the basepath you givefileinclude({
prefix: '@@',
basepath: '@file'
})
fileinclude({
prefix: '@@',
basepath: '/home/'
})
JSONindex.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
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:
<!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>
<!DOCTYPE html>
<html>
<body>
@@include(markdown('view.md'))
@@include('./var.html', {
"name": "haoxin",
"age": 12345
})
</body>
</html>
view.md
view
====
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 statementfileinclude({
context: {
name: 'test'
}
});
@@include('some.html', { "nav": true })
@@if (name === 'test' && nav === true) {
@@include('test.html')
}
for statementfileinclude({
context: {
arr: ['test1', 'test2']
}
});
<ul>
@@for (var i = 0; i < arr.length; i++) {
<li>`+arr[i]+`</li>
}
</ul>
loop statement<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>
<article>
<h1>@@title</h1>
@@text
</article>
loop statement + data.jsondata.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>" }
]
<body>
@@loop("loop-article.html", "data.json")
</body>
MIT
FAQs
A gulp plugin for file include
The npm package gulp-file-include receives a total of 9,269 weekly downloads. As such, gulp-file-include popularity was classified as popular.
We found that gulp-file-include demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
OpenSSF has published OSPS Baseline, an initiative designed to establish a minimum set of security-related best practices for open source software projects.
Security News
Michigan TypeScript founder Dimitri Mitropoulos implements WebAssembly runtime in TypeScript types, enabling Doom to run after processing 177 terabytes of type definitions.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.