UXKM의 Gulp - by. UXKM
- Gulp
- Gulp 시작
- UXKM의 Gulp
요약 설명
본 UXKM 웹사이트는 Gulp를 기반으로 제작되었습니다.
빌드 시스템을 처음 접하는 분들에게 Gulp는 다소 생소할 수 있습니다. 하지만 UXKM의 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분 마스터하기