Have ideas to improve npm?Join in the discussion! »

    gulp-file-include
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/gulp-file-include package

    2.3.0 • Public • Published

    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>

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

    Install

    npm i gulp-file-include

    DownloadsWeekly Downloads

    8,799

    Version

    2.3.0

    License

    MIT

    Unpacked Size

    20.8 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar