cheoljun.dev

Gulp 사용방법

Gulp
ID
68
status
Public
menu
Frontend
submenu
Tailwind
tags
Gulp
summary
thumbnail
gulp.png
date
Aug 3, 2024
  1. 전역 NPM Package에 Gulp를 설치(콘솔에서 gulp 호출 가능하게 함)
      2. npm install gulp-cli -g
  1. 레포지토리 생성 후 해당 레포로 이동
      2. mkdir repository
cd repository
  1. 두 개의 폴더 생성
      • src: 컴파일되기를 원하는 모든 파일들이 들어갈 폴더
    1. src 폴더 하위에 5개의 폴더 생성
        • scss
        • js
        • img
        • partials
        • templates
    1. src 폴더 하위에 하나의 pug파일 생성
        2. touch src/index.pug
    1. js 폴더 안에 util.js, main.js 파일 생성
        2. touch js/util.js js/main.js
    1. scss 폴더 안에 style.scss, _variables.scss, _reset.scss 파일 생성(”_”는 ~을 의미함)
        2. touch style.scss _variables.scss _reset.scss
    1. partials 폴더 안에 header.pug, footer.pug 파일 생성
        2. touch partials/header.pug partials/footer.pug
    1. templates 폴더 안에 layout.pug 파일 생성
        2. touch templates/layout.pug
    1. img 폴더 안에 아무 이미지 하나 넣기
    1. npm project 개시
        2. npm init
    1. package.json에서 “main” 제거
    Cheoljun Park
    Fullstack Developer

    구현 과정과 트러블슈팅, 배운 것들을 기록합니다.

    댓글