Gulp

yj6151122·2021년 1월 28일
0

자동화 도구

목록 보기
1/1

걸프(Gulp)란?
프론트엔드 작업을 빠르게 수행할 수 있도록 도와주는 워크 플로우 자동화 도구.
웹사이트 개발이 점점 복잡해지는 만큼, 프론트엔드 워크플로우 자동화 도구는 필수적이다.

걸프가 할 수 있는 일은?

  • CSS 처리
    모든 SCSS를 CSS로 컴파일한다. 캐쉬를 이용해 더 빠르게 처리한다.
    브라우저 지원을 위해 자동 접두사를 추가한다. (크로스 브라우징을 말하는 듯)
    편리한 디버깅을 위해 CSS 소스맵을 생성한다. (ctrl + css 구문을 누르면 해당 라인으로 이동)
    사용하는 써드파티 모듈/패키지로부터 CSS를 가져온다.
    CSS를 하나로 합치고 최소화한다.

  • 자바스크립트 처리
    ES6로 작성한 모든 자바스크립트를 브라우저 지원을 위해 변환한다.
    써드파티 모듈/패키지로부터 자바스크립트를 가져온다.
    자바스크립트 난독화
    HTML별로 인라인해야 할 자바스크립트를 가져온다.

  • 라이브 리로딩 처리
    CSS/SCSS가 변경되면 브라우저는 페이지 로드 없이 화면을 다시 그린다.
    자바스크립트가 변경되면 브라우저가 페이지를 다시 로딩한다.
    Twig/HTML 템플릿이 변경되면 브라우저가 페이지를 다시 로딩한다.

  • 웹사이트를 위해 CriticalCSS를 생성한다. (사용자에게 가능한 한 빨리 콘텐츠를 렌더링하기 위해 스크롤없이 볼 수 있는 콘텐츠에 대한 CSS를 추출하는 기술)

  • 웹 접근성 검사

  • Fontello를 통해 사용하는 glyphs만을 통해 커스텀 아이콘 글꼴 생성

  • 하나의 소스 이미지로부터 웹사이트를 위한 다양한 파비콘과 HTML코드를 생성

  • imagemin을 통해 웹사이트에서 사용하는 이미지를 무손실 압축

profile
배운 것을 기록하는 곳 💻🙂

0개의 댓글