로딩
요청 처리 중입니다...

[FE] Gulp+babel을 이용한 SCSS 컴파일 자동화

[FE] Gulp+babel을 이용한 SCSS 컴파일 자동화

SCSS는 CSS 전처리기 언어이기에 결국 CSS로 변환하는 과정을 거쳐야 한다. scss를 css로 변환하는 방법은 아래와 같다. $ npm install sass -g $ sass example.scss example.css sass가 전역 설치되었다는 가정 하에 "sass scss파일명 css파일명" 과 같이 해서 컴파일을 해줘야 사용할 수 있다. 이걸 매번 해준다면 매우 피곤할 것이다.

편하게 사용할 수 있는 방법이 있는데, 바로 gulp를 사용하는 것이다. 1. gulp란? gulp는 자동화 빌드 도구 중 하나이다. scss -> css 등의 반복적으로 수행되어야 하는 일들을 자동화해주는 툴이라고 보면 된다.

일련의 반복 작업들을 대신 처리해주다보니 개발 시간 단축에 도움을 준다. 앞서 말한 "반복적으로 수행되어야 할 일" 을 gulp에서는 "task"라고 부른다.

(공식문서) https://gulpjs.com/docs/en/getting-started/async-compl...

# gulp # gulpwatch # gulp란 # gulp바벨 # gulp사용법 # scssgulp # scssgulp사용 # scssgulp사용법 # scssgulp자동컴파일 # scss자동컴파일 # scss컴파일 # gulptask란 # gulptask # gulpbabel # gulpbabelscss # gulpbabel사용법 # gulpcss # gulpcsso # gulpdest # gulppipe # gulpscss # gulpseries # gulpsrc # scss컴파일자동화

원문 링크 : [FE] Gulp+babel을 이용한 SCSS 컴파일 자동화

등록된 다른 글

[Node.js] libuv의 이벤트 루프(Event Loop)에 대해 알아보자!
[Node.js] libuv의 이벤트 루프(Event Loop)에 대해 알아보자!
[JavaScript] 추상 구문 트리(Abstract Syntax Tree)
[JavaScript] 추상 구문 트리(Abstract Syntax Tree)
[Mac] VSCode에서 Prettier적용하기
[Mac] VSCode에서 Prettier적용하기
[프로그래머스] 전력망을 둘로 나누기 (JavaScript)
[프로그래머스] 전력망을 둘로 나누기 (JavaScript)
[프로그래머스] 신고 결과 받기 (JavaScript)
[프로그래머스] 신고 결과 받기 (JavaScript)
[프로그래머스] 게임 맵 최단거리 (JavaScript)
[프로그래머스] 게임 맵 최단거리 (JavaScript)