gulp-file-include

A gulp plugin for file include

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
gulp-file-include
676722.3.03 years ago10 years agoMinified + gzip package size for gulp-file-include in KB

Popular Searches

Readme

!NPM versionnpm-imgnpm-url !Build statustravis-imgtravis-url !Test coveragecoveralls-imgcoveralls-url !Licenselicense-imglicense-url !Dependency statusdavid-imgdavid-url !Gittergitter-imggitter-url
gulp-file-include
a gulp plugin for file includes

Installation

npm install --save-dev gulp-file-include

API

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) - '@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 
<!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>

@@includeonce 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