gulp-file-include
a gulp plugin for file include
Last updated a month ago by coderhaoxin .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install gulp-file-include 
SYNC missed versions from official npm registry.

NPM version Build status Test coverage License Dependency status Gitter

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>

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

Current Tags

  • 2.2.2                                ...           latest (a month ago)

42 Versions

  • 2.2.2                                ...           a month ago
  • 2.2.1                                ...           a month ago
  • 2.2.0                                ...           a month ago
  • 2.1.1                                ...           7 months ago
  • 2.1.0                                ...           10 months ago
  • 2.0.1                                ...           2 years ago
  • 2.0.0                                ...           3 years ago
  • 1.2.0                                ...           3 years ago
  • 1.1.0                                ...           3 years ago
  • 1.0.0                                ...           4 years ago
  • 0.14.0                                ...           4 years ago
  • 0.13.7                                ...           5 years ago
  • 0.13.6                                ...           5 years ago
  • 0.13.5                                ...           5 years ago
  • 0.13.4                                ...           5 years ago
  • 0.13.3                                ...           5 years ago
  • 0.13.2                                ...           5 years ago
  • 0.13.1                                ...           5 years ago
  • 0.13.0                                ...           5 years ago
  • 0.12.0                                ...           5 years ago
  • 0.11.1                                ...           5 years ago
  • 0.11.0                                ...           5 years ago
  • 0.10.0                                ...           5 years ago
  • 0.9.0                                ...           5 years ago
  • 0.8.0                                ...           5 years ago
  • 0.7.1                                ...           5 years ago
  • 0.7.0                                ...           6 years ago
  • 0.6.0                                ...           6 years ago
  • 0.5.1                                ...           6 years ago
  • 0.5.0                                ...           6 years ago
  • 0.4.2                                ...           6 years ago
  • 0.4.1                                ...           6 years ago
  • 0.4.0                                ...           6 years ago
  • 0.3.2                                ...           6 years ago
  • 0.3.1                                ...           6 years ago
  • 0.3.0                                ...           6 years ago
  • 0.2.1                                ...           6 years ago
  • 0.2.0                                ...           6 years ago
  • 0.1.0                                ...           6 years ago
  • 0.0.3                                ...           6 years ago
  • 0.0.2                                ...           6 years ago
  • 0.0.1                                ...           6 years ago
Downloads
Today 21
This Week 232
This Month 232
Last Day 102
Last Week 535
Last Month 2,482
Dependencies (8)
Dev Dependencies (6)

Copyright 2014 - 2016 © taobao.org |