https://github.com/haoxins/gulp-file-include

MAINTAINER WANTED ~ [gulp-file-include] a gulp plugin for file include
https://github.com/haoxins/gulp-file-include

Last synced: 19 days ago
JSON representation

MAINTAINER WANTED ~ [gulp-file-include] a gulp plugin for file include

• Host: GitHub
• URL: https://github.com/haoxins/gulp-file-include
• Owner: haoxins
• License: mit
• Created: 2014-01-06T03:35:43.000Z (almost 11 years ago)
• Default Branch: main
• Last Pushed: 2022-02-27T16:00:36.000Z (over 2 years ago)
• Last Synced: 2024-06-11T17:37:30.211Z (5 months ago)
• Language: JavaScript
• Homepage:
• Size: 139 KB
• Stars: 677
• Watchers: 18
• Forks: 95
• Open Issues: 72
• Metadata Files:
  • Readme: Readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![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

```


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


  

```

### 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



@@for (var i = 0; i < arr.length; i++) {

  
`+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

    Home

  

  


    
Support Contact Info

    Home