Sublimetext(서브라임텍스트)에서 Grunt(npm) 명령어 입력하고 사용하는 방법

Sublimetext(서브라임텍스트)에서 Grunt(npm) 명령어 입력하고 사용하는 방법

Grunt 를 사용하려면 명령어를 입력해야 합니다. 그래서 대부분 콘솔창이나 git 명령어창을 이용합니다.

하지만 Sublimetext(서브라임텍스트)에서도 명령어를 입력하고 Grunt(그런트)를 사용할 수 있습니다.

두개의 플러그인만 설치하면 됩니다. 해볼까요?

1. 플러그인설치

플러그인은 두개가 필요합니다.

npm 명령을 통해 플러그인을 설치하는 npm플러그인과 grunt 를 사용하기 위한 grunt플러그인

Ctrl+Shift+p 를 통해 명령팔렛트를 엽니다.

pci 를 입력하여 플러그인을 설치합니다.

npm 을 입력하여 npm플러그인 을 설치합니다.

또 pci 를 입력하고 grunt 를 입력하여 grunt플러그인을 설치합니다.

2. 사용법

플러그인을 두개 설치했으니 사용법도 두개 입니다.

먼저 npm 명령어를 통한 플러그인 설치 사용법과 grunt 사용법 입니다.

주의점: 아래명령어들은 그 폴더안에 정확히 위치한 상태에서 실행해야 합니다. 즉 종속성이 포함됩니다.

먼저 npm 명령어를 입력해서 플러그인을 설치해보겠습니다.

npm 명령어 사용법

저는 npm-test 라는 폴더를 만들고 그 안에 package.json 이라는 파일을 만들었습니다.

package.json 클릭한후 Ctrl+Shift+p 를 눌러 명령팔렛트에서 npm 을 입력하니 npm플러그인들이 나옵니다.

npm:Install Package 를 클릭합니다.

일단 grunt 라는 플러그인을 설치해보겠습니다.

명령어는 npm install 플러그인명 입니다.

npm install --save-dev grunt 입력해도 되고 그림처럼 단축키를 입력해도 작동이 됩니다.

단축키를 사용하면 보시는것처럼 i 와 npm 도 같이 설치가 됩니다. 또한 설치가 되면 서브라임텍스트 콘솔창에 로그가 나옵니다.

만약 한번에 Grunt 플러그인을 설치하려면 npm i -D 플러그인명 플러그인명 플러그인명 ... 식으로 입력하고 엔터를 치면 됩니다.

아래 그림이 그 예입니다.

이런식으로 grunt 플러그인 을 모두 설치해봤습니다. 이제 grunt 를 사용해보겠습니다.

grunt 사용법

grunt 를 사용하려면 grunt 를 사용할 수 있는 환경에서 해야합니다. 즉 gruntfile.js, package.json 등의 파일이 있고, 소스파일과 nodejs 등이 설치되어 있어야 한다는 말입니다.

블로그에 관련글이 많이 있으니 참고하시기 바랍니다.

저는 grunt-template-javacript 라는 템플릿 폴더에서 아래처럼 진행해보았습니다.

아래예제처럼 테스트하고 싶으시면 제가 예제파일을 저장소에 올려두었으니 grunt 를 사용할 줄 아시는분은 사용하세요.

grunt-template-javacript

저는 gruntfile.js 를 클릭한후 Ctrl+Shift+p 를 눌러 명령팔렛트에서 grunt 를 입력하면 아래처럼 나옵니다.

Grunt 에서 엔터를 치면 아래처럼 나옵니다.

이것은gruntfile.js 에서 태스트가 현재 default 와 serve 두개가 있기 때문에 이처럼 나오는겁니다.

default 에서 엔터를 칩니다. 그럼 그런트 태스크가 실행이 됩니다.

완료되면 로그에서 보듯 완료되었다고 나옵니다.

똑같은 순서로 serve 에서 엔터를 쳤을때입니다. 해당 파일을 수정하니 바로 감지하고 파일과 로그가 동시에 변경됩니다.

여기까지 완료입니다.

이렇듯 이제 Sublimetext(서브라임텍스트)에서 npm 명령과 grunt 명령도 할수 있습니다. 잘만하면 콘솔창이 필요없습니다.