leeda-cloud
[Gulp] include 기능 추가하기 본문
지난번 노마드코더에서 배운 Gulp를 이용 중 include 기능을 추가하고 싶어졌다.
우선 gulp include 파일을 설치하고 gulp 파일에 연결이 필요했다.
gulp-file-include 설치
npm install --save-dev gulp-file-include
gulpfile.babel.js에 추가
import gulp from "gulp";
import fileinclude from "gulp-file-include";
const routes = {
html: {
src: "src/html/*.html",
dest: "build/"
},
include : {
src: "src/html/include/*.html",
dest: "build/"
},
};
const inc = () =>
gulp.src([
routes.html.src,
"!" + routes.include.src
])
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest(routes.include.dest));
const assets = gulp.series([inc]);
export const dev = gulp.series([assets])
나는 노마드코더에서 gulpfile.babel.js로 변환시켰기 때문에(참고 : https://leeda-cloud.tistory.com/64 ) 위처럼 추가했는데 그냥 gulpfile.js인 사람은 위의 방식이 아닌 아래 방식으로 추가한다.
gulpfile.js에 추가
const gulp = require('gulp');
const fileinclude = require('gulp-file-include');
gulp.task('fileinclude', function() {
return gulp.src([
"./src/html/*", // 불러올 파일의 위치를 표시(html 파일)
"!" + "./src/html/include*" // 불러오지 않을 파일의 위치(include 파일)
])
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('./build/')); //변환되어서 저장될 파일 위치
});
gulp.task( "default",
gulp.parallel("fileinclude")
);
그 후 include 파일을 만들고 html에는 아래처럼 연결하면 된다.
<!DOCTYPE html>
<html lang="en">
<head>
@@include('./include/head.html')
</head>
<body>
include 확인하기!
</body>
</html>
gulp를 실행하고 확인해 보면!
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width, viewport-fit=cover">
<title>Test</title>
</head>
</head>
<body>
include 확인하기!
</body>
</html>문제없이 실행된다.
https://www.npmjs.com/package/gulp-file-include
gulp-file-include
A gulp plugin for file include. Latest version: 2.3.0, last published: 2 years ago. Start using gulp-file-include in your project by running `npm i gulp-file-include`. There are 72 other projects in the npm registry using gulp-file-include.
www.npmjs.com
'Gulp' 카테고리의 다른 글
| [Gulp] 최신 소스 파일만 확인하기 (gulp-newer) (0) | 2022.12.26 |
|---|---|
| [Gulp] 이미지 최적화 ( gulp-image, gulp-imagemin ) (1) | 2022.12.22 |
| [Gulp] typescript 기능 추가하기 (0) | 2022.12.14 |
| [Gulp] prettier 기능 추가하기 (줄 정리) (0) | 2022.12.14 |
| [Gulp] Gulp 설치 및 세팅하기 (0) | 2022.11.21 |
'Gulp' Related Articles
more
Comments