Grunt와 Gulp 작업은 기본적으로 명령 줄을 사용하여 수행됩니다. 그러나 IDE WebStorm을 사용하면 UI에서 쉽게 작업을 실행, 중지 및 다시 시작할 수 있습니다.

UI에서 작업 실행을 관리할 수 있는 이점

프로젝트가 엄청나게 커짐에 따라 작업의 양도 증가합니다. WebStorm의 UI를 사용하면 어떤 태스크가 등록되어 있는지 알기 쉽고 관리하기 쉬워집니다. 또, 커맨드 라인에 희미한 팀 멤버가 있는 경우도, Gulp의 환경 구축만 할 수 있으면 버튼 하나로 태스크의 실행을 할 수 있기 (위해)때문에 간편합니다.

작업 실행 방법

이제 WebStorm에서 작업을 수행하는 방법을 살펴 보겠습니다. 이번은 Gulp의 예로 설명합니다만, Grunt의 경우도 같습니다.

■ 절차

Gulp 작업이 정의된 프로젝트를 WebStorm에서 엽니다.

gulpfile.js에서 마우스 오른쪽 버튼을 클릭하고 컨텍스트 메뉴에서 Show Gulp Tasks를 선택합니다.

[View] → [Tool Windows] → [Gulp]를 선택하면 UI에 Gulp 실행 패널이 표시되고 미리 등록해 둔 태스크가 ①의 위치에 표시됩니다.

①의 부분의 태스크명을 더블 클릭하거나 ②의 상단의 실행 버튼을 더블 클릭하면 지정한 태스크가 실행됩니다.

태스크를 중지하고 다시 실행하는 방법

watch중 등 실행 도중의 태스크는, ②의 개소의 상부 버튼으로 재실행, 하부 버튼으로 정지를 할 수 있습니다.

마지막으로

프로젝트 인계시 등, 누군가가 정의한 태스크의 이름을 커멘드 라인으로부터 입력하는 것은 의외로 귀찮은 것입니다. 작업의 양이 많으면 더욱 그렇습니다. 그럴 때는 WebStorm UI를 사용하여 잘 작업을 관리합시다.

참고
Gulp Tool Window