npm gulp-file-include

2021-07-31

npm

파일을 인클루드하기 위한 gulp 플러그인.

설치

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

API (gulp.js 파일)

const fileinclude = require('gulp-file-include');
const gulp = require("gulp");

gulp.task('fileinclude', function() {
    return gulp.src([
        "./src/html/*/*/*", // 불러올 파일 위치
        "!" + "./src/html/include/*" // 읽지 않을 파일 위치
    ])
    .pipe(fileinclude({
        prefix: '@@',
        bashpath: '@file'
    }))

    .pipe(gulp.dest('./dist/')); // 변환한 파일 저장 위치
});

prefix

Type: string
Default: @@

fileinclude([options])

Type: object

options.prefix
Type: string
Default: @@

options.suffix
Type: string
Default: ``

options.basepath
Type: string
Default: @file
possible values: @file, @root, path/to/dir

options.filters
Type: object
Default: false

options.context
Type: object
Default: {}
Context of if statement.

options.indent
Type: boolean
Default: false

Examples

if문

index.html

@@include('./if-nav.html', {
  context: {
      name: 'test'
  }
}

if-nav.html

1
2
3

@@if (name === 'test' && nav === true) {
  @@include('test.html')
}

for문

index.html

@@include('./for-list.html', {
  context: {
      arr: ['test1', 'test2']
  }
}

for-list.html

<ul>
@@for (var i = 0; i < arr.length; i++) {
  <li>`+arr[i]+`</li>
}
</ul>

loop문

index.html

@@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>" }
])

loop-article.html

<article>
  <h1>@@title</h1>
  @@text
</article>

REFERENCE