NPM version Build status Test coverage License Dependency status Gitter
a plugin of gulp for file include
npm install gulp-file-include
- options - type:
string, just as prefix, default@@, and basepath is default@file
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 ofifstatement - indent:
boolean, defaultfalse
- prefix:
-
options.basepath - type:
string, it could be@root, include file relative to the dir wheregulprunning in@file, include file relative to the dir wherefilein exampleyour-basepathinclude file relative to the basepath you give
fileinclude({ prefix: '@@', basepath: '@file' })
fileinclude({ prefix: '@@', basepath: '/home/' })
- @@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" } }) @@include('./var.html', @@socials) </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('./')); });
fileinclude({ context: { name: 'test' } });
@@include('some.html', { "nav": true })
@@if (name === 'test' && nav === true) {
@@include('test.html')
}
fileinclude({ context: { arr: ['test1', 'test2'] } });
<ul> @@for (var i = 0; i < arr.length; i++) { <li>`+arr[i]+`</li> } </ul>
- 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>
<body> @@loop("loop-article.html", @@parameter) </body>
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> <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>
and the result is:
<!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>
MIT