웹서버 운영, 설치에 사용되는 빌드툴 걸프(Gulp)는 무엇인지 알아보자.
Gulp란?
자바스크립트에서 반복적이고 자주 사용되는 일은 자동화해주는 매우 유용한 툴로 빌드시스템이라고 불린다. 이를 사용하면 시간을 줄일 수 있고 생산성 향상에 큰 도움이 되므로 프로젝트 진행시 많이 사용된다. Grunt또는 Webpack 비교되는 툴로 매우 자주 사용된다.
Q. Grunt?
Github은 grunt에 대해, ‘Grunt is a task-based command line build tool for JavaScript projects.’ 라고 설명하고 있다. 프로젝트에 사전정의된 task 단위로 실행되며 command line을 통해 동작하는 자바스크립트 용 빌드 툴이라는 뜻이다. Grunt는 수많은 기능의 플러그인을 제공하며 사용자가 원하는 작업들을 설정해놓기만 하면, ‘grunt’라는 command line하나로 설정해놓은 모든 작업을 알아서 실행해준다.
Grunt의 가장 큰 장점은 관련 지식이나 경험이 없어도 쉽게 접근하고 사용할 수 있다는 점과 최소한의 노력으로 원하는 모든 것을 자동화 시킬 수 있다는 것이다. Grunt를 통해 할 수 있는 작업의 범위는 매우 크고, 끊임없이 자라나고 있기 때문에 우리는 그저 우리가 원하는 것을 골라 쓰기만 하면 된다. Grunt란 한마디로, ‘원하는 일을 자동화해서 작업 효율을 높이는 툴’ 이라고도 말할 수 있을 것이다.
Q. Webpack?
현대 Javascript Application의 Static Module Bundler로 Webpack이 실행된다면 Dependencies Graph를 통해 필요한 형태의 하나 또는 여러개의 Bundle로 생성한다.
- Bundle이란?
- 소프트웨어 및 일부 하드웨어와 함께 작동하는 데 필요한 모든 것을 포함하는 Package.
- 각각의 모듈들에 대해 의존성 관계를 파악하여 하나 또는 여러개의 그룹
Gulp의 하는 일은?
- 자바스크립트 라이브러리, 서드파티 앱등을 모으고 축소, 압축을 수행
- 단위 테스트(Unit Test) 수행
- LESS / CSS 컴파일링
- 브라우저 Refresh를 도와줌
npm을 사용한 gulp 설치 및 실행하기
npm init
먼저 package.json이 존재하는지 확인한다. 없다면 이 역시 생성 및 설정해야 한다. 위 명령어를 실행하면 package.json이 설정된다.
npm install --save-dev gulp
다음으로 install 명령어를 사용하여 gulp를 설치한다. --save-dev를 주는 이유는 개발과정에만 필요하므로 devDependency, 디펜던시로 모듈을 설치하기 위함이다.
gulp가 설치 완료!
루트 경로를 보면 gulpfile.js 파일이 존재하는데 실행할 Task들을 이곳에 입력하여 실행하도록 한다.
오류기록
처음에는 나는 다른 경로에다가 gulp 명령어를 실행했는데 실행이 안된다는 오류와 함께 gulpfile.js 파일이 존재하지 않는다고 했다. 해당 폴더 안으로 들어가 npm install gulp -g, yarn을 설치했어야 했는데 바깥에다 해버렸다 ㅠ 그래서 다시 폴더 내에 하니까 gulpfile.js 파일을 잘찾으며 동작했음!
~ing
Gulp를 사용하려면 gulp에 설치된 plugin(플러그인)들이 필요하다.
gulp-webserver // 웹서버를 구동함
gulp-sass // SASS의 컴파일링
gulp-livereload // 리로드 기능을 수행등등 ...암튼 이후에 이제 Gulp에게 일을 준다. 아래의 4가지 API를 사용하여 동작시키며 이때 Gulp task 파일(gulpfile.js)을 사용한다.
Gulp APIs
gulp.task //반복적으로 수행되야 할 Task들을 모두 작성하여 동작시킴
gulp.src // 어떤 파일을 읽을 것인지 결정
gulp.dest //어디에 저장할 것인지 경로를 결정
gulp.watch //파일의 변경, 업데이트 등을 감지하여 특별한 동작을 수행실제로 gulp를 실행한 결과 다음과 같은 것들이 작용한 것을 확인하였음 😉😉😉
[출처]
https://nuli.navercorp.com/community/article/1132682?email=true
