반응형
1. 설치
npm install --save-dev gulp-file-include2. gulpfile.js 설정
const gulp = require("gulp");
const fileinclude = require('gulp-file-include');
gulp.task('fileinclude', function() {
return gulp.src([
"./src/html/*", // ★★★★ 불러올 파일의 위치
"!" + "./src/html/include*" // ★★★★ 읽지 않고 패스할 파일의 위치
])
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('./dist/html')); // ★★★★ 변환한 파일의 저장 위치 지정
});
gulp.task( "default",
gulp.parallel("fileinclude")
);gulp 설치 및 .src() .pipe() .dest() / 설명 수정 추가 :(
2021/01/09 - [web/gulp] - [템플릿] gulp-file-include 사용법
3. 샘플, 설명은 다음 글에서 :)
3-1. 파일트리
├─dist
├─node_modules
├─src
│ ├─html
│ │ ├─include
│ │ │ └─header.html
│ │ └─main.html
│ ├─img
│ └─scss
├─gulpfile.js
├─package-lock.json
└─package.json3-1-1. header.html
<header>
<h1>Header Area</h1>
</header>3-1-2. main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
</head>
<body>
@@include('./include/header.html') <!-- ★★★★ gulp-file-include 태그 -->
</body>
</html>3-2. 터미널에서 gulp 실행
gulp3-3. 결과물: dist > html > main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
</head>
<body>
<header>
<h1>Header Area</h1>
</header>
</body>
</html>반응형
'javascript > gulp' 카테고리의 다른 글
| [템플릿] gulp-ejs : 설치 및 gulpfile.js 설정 (0) | 2021.01.09 |
|---|---|
| [템플릿] gulp-file-include 사용법 (0) | 2021.01.09 |
| [로컬 테스트 서버] browser-sync + gulp-sass : scss 수정하고 바로 확인하자 (0) | 2021.01.08 |
| [css 초기화] gulp-sass + node-normalize-scss (0) | 2021.01.08 |
| [gulp-sass] (dart) sass를 위한 gulp 플러그인 설치 및 설정 2 (0) | 2021.01.08 |
댓글