UXKM의 Gulp - by. UXKM

요약 설명

본 UXKM 웹사이트는 Gulp를 기반으로 제작되었습니다.
빌드시스템을 경험해 보지 못한 상황이라면 Gulp가 많이 생소할 수 있습니다. Gulp를 처음 도전하는 분도 커리큘럼을 천천히 따라 하면 기본적인 세팅이 가능하게끔 꼼꼼히 내용을 정리했습니다.
단계별로 파일을 정리하면서 진행하기에 이해가 다소 늦더라도 걱정하지 않아도 됩니다.

시작하기에 앞서...

UXKM의 Gulp 강의에서는 HTML, CSS의 내용을 많이 다루지는 않습니다.
하지만 Gulp를 활용하여 편리한 HTML, CSS 작업 환경을 세팅하는 것이 주 목적이기에 초급 이상의 HTML, CSS 이해도는 필수입니다.
왕초보 분들은 선수 강의로 시작하세요!

Javascript를 반드시 알아야 할까?

알면 좋습니다.
Gulp를 포함한 모든 자동화 빌드(Grunt, Webpack 등) 시스템은 javascript 기반입니다.
기본적인 javascript 언어의 이해가 없으면 처음부터 스스로 세팅하는 것은 물론, 각자의 입맛에 맞게 혹은 진행하는 프로젝트 환경에 따라 폴더 및 파일구조를 다르게 구성해야 할 경우 난관에 봉착할 수 있습니다.

하지만, 지금 당장은 몰라도 됩니다.
커리큘럼 순서대로 천천히 따라 하고 반복하면서 학습해도 충분합니다.
그러나 Gulp가 아니더라도 퍼블리셔라면 초급 수준의 javascript 지식은 필수이기 때문에 공부하는 것을 권장합니다.

UXKM의 Gulp 강의 목적

  • Node.js를 설치하고 터미널에서 npm(Node Pacackage Manager) 명령어를 이용하여 여러 패키지를 설치해 봅니다.
  • package.json을 생성해 봅니다.
  • 빌드 시스템의 기본적인 폴더 구조를 파악하고 경험해 봅니다.
  • NJK(gulp-nunjucks-render)를 활용하여 많은 양의 HTML 작업환경에 존재하는 반복적인 불편한 요소를 해결해 봅니다.
  • 많은 양의 html 작업환경에 존재하는 반복적인 불필요한 요소를 해결하기 위해 NJK(gulp-nunjucks-render) 패키지를 활용해 봅니다.
  • Apache와 같은 별도의 웹 서버 없이 Gulp 자체에서 웹 서버를 실행하고 브라우저 새로고침(refresh) 없이 실시간으로 파일의 업데이트를 경험해 봅니다.
  • Sass(SCSS)를 간접적으로 경험하고 css로 컴파일 하는 방법을 알아봅니다.
  • ESMAScript(ES6+)를 간접적으로 경험하고 자동으로 이미지 파일을 압축하는 방법을 알아봅니다.

UXKM Gulp 강의의 목적은 위 목록에 언급된 것처럼 Gulp 세팅 과정의 모든 생소한 환경과 상황을 경험해 보고 나아가 실제 프로젝트에서 활용하는 것에 있습니다.
한번 세팅으로 끝나지 않고 처음부터 여러 번 반복해서 세팅하여 Gulp에 익숙해지는 것을 권장합니다.

UXKM Gulp 강의는 Gulp를 이용해서 UXKM 웹사이트 제작해 본 경험으로 얻은 노하우노마드 코더[Gulp 90분 마스터하기] 강의를 바탕으로 제작되었습니다.

Gulp 90분 마스터하기