[![NPM version][npm-img]][npm-url] [![Build status][travis-img]][travis-url] [![Test coverage][coveralls-img]][coveralls-url] [![License][license-img]][license-url] [![Dependency status][david-img]][david-url] [![Gitter][gitter-img]][gitter-url] # gulp-file-include a [gulp](https://github.com/gulpjs/gulp) plugin for file includes ## Installation ```bash npm install --save-dev gulp-file-include ``` ## API ```js 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 which `file` resides ([example](#include-options---type-json)) - `'@root'`: include file relative to the dir in which `gulp` is running - `path/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 ```html @@include('./view.html') @@include('./var.html', { "name": "haoxin", "age": 12345, "socials": { "fb": "facebook.com/include", "tw": "twitter.com/include" } }) ``` view.html ```html

view

``` var.html ```html @@name @@age @@socials.fb @@socials.tw ``` gulpfile.js ```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: ```html

view

haoxin 12345 facebook.com/include twitter.com/include ``` ### @@include_once options - type: `JSON` index.html ```html @@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" } }) ``` view.html ```html

view

haoxin 12345 facebook.com/include twitter.com/include ``` ### filters index.html ```html @@include(markdown('view.md')) @@include('./var.html', { "name": "haoxin", "age": 12345 }) ``` view.md ```html view ==== ``` gulpfile.js ```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 ```js fileinclude({ context: { name: 'test' } }); ``` ### `for` statement index.html ```html

`+arr[i]+`

``` gulpfile.js ```js fileinclude({ context: { arr: ['test1', 'test2'] } }); ``` ### `loop` statement index.html ```html @@loop('loop-article.html', [ { "title": "My post title", "text": "

lorem ipsum...

" }, { "title": "Another post", "text": "

lorem ipsum...

" }, { "title": "One more post", "text": "

lorem ipsum...

" } ]) ``` loop-article.html ```html

@@title

@@text

``` ### `loop` statement + `data.json` data.json ```js [ { "title": "My post title", "text": "

lorem ipsum...

" }, { "title": "Another post", "text": "

lorem ipsum...

" }, { "title": "One more post", "text": "

lorem ipsum...

" } ] ``` loop-article.html ```html @@loop("loop-article.html", "data.json") ``` ### `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 ```html

Support Contact Info

``` result: ```html

Support Contact Info

``` ### License MIT [npm-img]: https://img.shields.io/npm/v/gulp-file-include.svg?style=flat-square [npm-url]: https://npmjs.org/package/gulp-file-include [travis-img]: https://img.shields.io/travis/haoxins/gulp-file-include.svg?style=flat-square [travis-url]: https://travis-ci.org/haoxins/gulp-file-include [coveralls-img]: https://img.shields.io/coveralls/coderhaoxin/gulp-file-include.svg?style=flat-square [coveralls-url]: https://coveralls.io/r/coderhaoxin/gulp-file-include?branch=master [license-img]: http://img.shields.io/badge/license-MIT-green.svg?style=flat-square [license-url]: http://opensource.org/licenses/MIT [david-img]: https://img.shields.io/david/coderhaoxin/gulp-file-include.svg?style=flat-square [david-url]: https://david-dm.org/coderhaoxin/gulp-file-include [gitter-img]: https://badges.gitter.im/Join%20Chat.svg [gitter-url]: https://gitter.im/coderhaoxin/gulp-file-include?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge

	Stars	Issues	Version	Updated	Created
gulp-file-include	674	72	2.3.0	3 years ago	10 years ago
gulp-html-extend	66	13	1.1.6	9 years ago	10 years ago
gulp-include	158	24	2.4.1	5 years ago	10 years ago
gulp-template-html	12	1	0.2.2	5 years ago	9 years ago

gulp-file-include vs gulp-html-extend vs gulp-include vs gulp-template-html

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past