gulp-data : json 데이터 좀 html에 기입해주시겠습니까

1. 설치

npm install --save-dev gulp-data 

2. gulpfile.js 설정

2-1: pipe에 직접 데이터 삽입

const gulp = require("gulp");
const nunjucksRender = require("gulp-nunjucks-render");
const data = require('gulp-data'); // ★★★★ gulp-data add


gulp.task("nunjucks-html", function(){
    return gulp
        .src("src/html/pages/*")
        .pipe( // ★★★★ gulp-data add
            data(function(){
                return require("./src/page_data.json")
            })
        )
        .pipe
            (nunjucksRender({
                path: ["src/html/templates"]
            })
        )
        .pipe(gulp.dest("dist"));
});

gulp.task(
    "default",
    gulp.parallel("nunjucks-html") 
);

2-2: 변수 처리하여 pipe 삽입: 여러 개의 task에서 data사용 시 이 방법이 더 용이!

const gulp = require("gulp");
const nunjucksRender = require("gulp-nunjucks-render");
const data = require('gulp-data'); // ★★★★ add
const page_data = require("./src/page_data.json"); // ★★★★ add : page_data로 변수 처리

gulp.task("nunjucks-html", function(){
    return gulp
        .src("src/html/pages/*")
        .pipe( // ★★★★ add : page_data 변수 삽입
            data(page_data)
        ) 
        .pipe
            (nunjucksRender({
                path: ["src/html/templates"]
            })
        )
        .pipe(gulp.dest("dist"));
});

gulp.task(
    "default",
    gulp.parallel("nunjucks-html") 
);

2021/01/07 - [web/gulp] - [템플릿] gulp-nunjucks-render : 설치 및 gulpfile 설정

2021/01/07 - [web/gulp] - [템플릿] gulp-nunjucks-render : 기본 사용방법

2021/01/07 - [web/gulp] - [템플릿] gulp-nunjucks-render : function(if, for, marco)