[gulp] include + sass + watch 초간단 셋팅하기

node -v

v18.12.0

 

gulp -v

CLI version: 2.3.0
Local version: 4.0.2

 

 

 

 

 

 

 

1. 터미널을 연다.

2. 경로는 작업할 폴더를 향하게 한다.

3. html, scss 환경이다.

 

 

 

 

 

 

🤗  gulp 환경 셋팅

//package.json 생성 배포할 때 반드시 필요한 파일이다.
//별다른 값이 없으면 계속 엔터친다.
npm init


//gulp를 전역적으로 설치한다. 최초 1회만 하면 된다.
npm i gulp -g


//해당 폴더에서 gulp를 로컬 설치한다.
npm i gulp --save-dev
//또는 npm i gulp -D


//gulp가 잘 설치되었는지 버전 확인한다.
gulp -v

 

 

🤗 필요한 패키지 설치

//인클루드 설치
npm i gulp-file-include -D


//sass 설치
npm i gulp-sass -D


//watch 설치
npm i gulp-watch -D

 

 

 

🤔 --save와 --save-dev(-D)의 차이?

"dependencies"  vs  "devDependencies" 

--save는 앱이 동작하는 데 필요한 패키지를 설치할 때 사용한다.
--save-dev는 앱을 개발하거나 빌드할 때 필요한 패키지를 설치할 때 사용한다.

앱 실행에 필요한 건 '--save'
👉 react, react-dom, vue 등

앱 개발 과정에서만 필요한 건 '--save-dev'
👉 webpack, babel, sass 등

 

 

 

 

😎 gulpfile.js 생성

const { src, dest, series, watch } = require("gulp");
const fileinclude = require("gulp-file-include");
const sass = require("gulp-sass")(require("sass"));

// SCSS 파일을 CSS로 컴파일하는 작업
function buildStylesTask() {
    return src("./resources/scss/**/*.scss")
        .pipe(sass.sync({ outputStyle: "compressed" }).on("error", sass.logError))
        .pipe(dest("./resources/css"));
}

// HTML 파일에 포함시킬 내용을 처리하는 작업
function fileIncludeTask() {
    return src([
        "./html/**/*.html", // HTML 파일 위치
        "!./html/include/**/*", // include 폴더 내 파일은 제외
    ])
        .pipe(
            fileinclude({
                prefix: "@@",
                basepath: "@file",
            })
        )
        .pipe(dest("./dist", { allowEmpty: true })); // 변환한 파일 저장 위치
}

// HTML과 SCSS 파일 변경사항을 감지하는 작업
function fileWatchTask() {
    watch("./html/**/*.html", series(fileIncludeTask)); // HTML 파일 변화 감지 및 fileIncludeTask 실행
    watch("./resources/scss/**/*.scss", series(buildStylesTask)); // SCSS 파일 변경 감지 후 buildStylesTask 실행
}

//각각의 작업을 정의
exports.buildStyles = buildStylesTask;
exports.fileInclude = fileIncludeTask;

//기본 작업: buildStylesTask, fileIncludeTask, fileWatchTask를 순차적으로 실행
exports.default = series(buildStylesTask, fileIncludeTask, fileWatchTask);

 

 

 

 

---

 

 

 

🥳 현재 내가 작업한 폴더

 

프로젝트에서 Metronic라는 유료 템플릿을 사용하면서, 해당 템플릿의 HTML 파일을 기반으로 작업을 진행했다. 그 중에서 헤더, 푸터, 사이드바 등을 인클루드하여 사용하기 위해 Gulp 환경을 설정했다. 이로 인해 폴더 구조가 조금 다르게 형성되었다.

Metronic 템플릿에서 제공하는 파일들은 assets와 html 폴더에 있고, 여기에 추가로 만든 assets은 resources 폴더 안에 있다.

나는 html 폴더 안에 인클루드 폴더를 만들어서 여기에 필요한 구성 요소들을 모아두고, gulp를 실행하면 dist 폴더에 최종 결과물이 빌드되도록 설정했다.

만일 프로젝트의 성격이 변경되어 폴더 구조를 바꾸거나, 템플릿의 경로를 조정해야 한다면, gulpfile.js 내에서 해당 경로들을 수정하면 된다. 즉, 프로젝트의 특성에 맞춰 폴더 구조나 파일 경로를 적절히 조정하여 gulp 설정을 유연하게 변경할 수 있다.

 

 

 

 

 

 

 

---

 

https://www.npmjs.com/package/gulp-file-include

gulp-file-include

 

https://www.npmjs.com/package/gulp-watch

gulp-watch

 

https://www.npmjs.com/package/gulp-sass

gulp-sass