Croot Blog

Home About Tech Hobby Archive

Gulp를 이용한 정적 HTML 개발환경 구축

카테고리기술
태그
  • Gulp
  • SCSS
  • 개발환경
수정일Dec 11, 2023
작성일Dec 5, 2023

정적 HTML 페이지를 개발할 일이 생겨서 7년만에 다시 gulp를 찾아보았다.

기존에 사용하던거는 Node6 기반이고 너무 오래되어서 못쓸 것 같아서 가볍게 다시 작성해보았다.

💡
전체 샘플 코드는 아래 리포지토리를 참고하시길 바랍니다.
https://github.com/croot-dev/gulp-sample

1. 프로젝트 폴더 생성

mkdir myproject && cd myproject

2. package.json 생성

yarn init
yarn init v1.22.19
question name: 
question version (1.0.0): 
question description: 
question entry point: 
question repository url: 
question author: 
question license:
question private:
success Saved package.json
✨  Done in 28.52s.
yarn add gulp gulp-clean gulp-file-include browser-sync -D

3. 프로젝트 폴더 구조 (샘플 예시)

src/
 |- includes/
 |- |- head.html
 |- |- header.html
 |- `- footer.html
 |- scss/
 |- `- main.scss
 |- pages/
 |- `- index.html
 `-assets/
   `- scripts/
      `- jquery.js

3. Gulpfile.js 작성

// Gulpfile.js

const gulp = require('gulp');
const include = require('gulp-file-include');
const server = require('browser-sync').create();
const { watch, series } = require('gulp');

// 경로 상수 선언.
const PATH = {
    SRC: './src',
    SRC_HTML: './src/pages/**/*.html',
    SRC_ASSETS: `./src/assets/**/*`,
    DIST: './dist'
}

// 정적 리소스 파일 복사.
async function buildAssets() {
  gulp.src([PATH.SRC_ASSETS])
    .pipe(gulp.dest(PATH.DIST));
}

// HTML 파일 include 적용.
async function buildHTML() {
  gulp.src([PATH.SRC_HTML])
        // include partials
        .pipe(include({
          prefix: '@',
          basepath: 'src/includes'
        }))
        .pipe(gulp.dest(PATH.DIST));
}

// 로컬 서버 자동 리로드.
async function reload() {
  server.reload();
}

exports.default = async function() {
  buildHTML();
  buildAssets();
  
  server.init({
    server: {
      baseDir: PATH.DIST
    }
  });

  // 변경 감지 시 마다 자동으로 재실행.
  watch([`${PATH.SRC}/**/*`], series(buildHTML, buildAssets, reload));
};

// clean directories
const clean = require('gulp-clean');
exports.clean = function () {
  return gulp.src([PATH.DIST], { read: false, allowEmpty: true })
  .pipe(clean());
}

4. 실행

# 작성 Task 실행
yarn gulp

# 산출 폴더 제거 실행 시
yarn gulp clean

+ SCSS 사용 환경 추가

yarn add -D sass gulp-sass

SCSS 빌드 스크립트 추가 된 Gulpfile.js

// Gulpfile.js

const gulp = require('gulp');
const include = require('gulp-file-include');
const server = require('browser-sync').create();
const { watch, series } = require('gulp');

// 경로 상수 선언.
const PATH = {
    SRC: './src',
    SRC_HTML: './src/pages/**/*.html',
    SRC_ASSETS: `./src/assets/**/*`,
    DIST: './dist'
}

// 정적 리소스 파일 복사.
async function buildAssets() {
  gulp.src([PATH.SRC_ASSETS])
    .pipe(gulp.dest(PATH.DIST));
}

// HTML 파일 include 적용.
async function buildHTML() {
  gulp.src([PATH.SRC_HTML])
        // include partials
        .pipe(include({
          prefix: '@',
          basepath: 'src/includes'
        }))
        .pipe(gulp.dest(PATH.DIST));
}

// 로컬 서버 자동 리로드.
async function reload() {
  server.reload();
}

exports.default = async function() {
  buildHTML();
  buildAssets();
/***********
 ** ADDED **
 **********/
	buildStyles();
  
  server.init({
    server: {
      baseDir: PATH.DIST
    }
  });

  // 변경 감지 시 마다 자동으로 재실행.
/***********
 ** ADDED **
 **********/
  watch([`${PATH.SRC}/**/*`], series(buildHTML, buildStyles, buildAssets, reload));
};

// clean directories
const clean = require('gulp-clean');
exports.clean = function () {
  return gulp.src([PATH.DIST], { read: false, allowEmpty: true })
  .pipe(clean());
}

/***********
 ** ADDED **
 **********/
// build sass
const sass = require('gulp-sass')(require('sass'));
exports.buildStyles = buildStyles;

REF: https://dev.to/caiojhonny/html-includes-with-gulp-js-2def

Previous Dec 4, 2023
« Git emoji 정리