그알못을 위한 Grunt로 Hello World하기
- 예제 실행
* 목표 : grunt를 이용하여 c:/examples/SomeProject 디렉토리의 밑에 html / css / js 디렉토리 3개를 생성해본다.
1) package.json 파일 생성
– npm init 명령 입력
– 위 명령을 통해 package.json 파일을 생성한다. 이 파일은 현재 애플리케이션의 패키지 관리를 위한 설정 파일이다.
– 비어있는 기본 양식 파일을 만든다는 생각을 하면 된다.
– 더이상 대문자는 사용할 수 없게 변경되었으므로, name은 그냥 name이라고 치고 넘어가자.
– 나머진 전부 엔터친다. 걍 빈 양식파일을 만들면 그것으로 족하다.
2) npm을 이용한 grunt 설치
– npm install grunt –save-dev 명령 입력
– 노드의 모듈인 grunt를 설치한다.
– –save-dev옵션은 의존성 중에서도 devDependencies로 들어가게 된 옵션이다.
– 위에서 만든 pagkage.json의 devDependencies key 밑으로 자동으로 입력되게 된다.
– 일반 dependencies와는 다르다. 뭐가 다른지는 향후 다른 자료로 업로드 계획
3) grunt 실행 전 준비
– 알다시피 grunt는 node의 모듈이다.
– 현재 디렉토리(grunt가 설치된 디렉토리)에서 grunt를 입력하면, 같은 위치에 존재하는 Gruntfile.js파일을 찾아 수행하게 된다.
– 만약 파일이 없는 상태에서 grunt t 라는 명령어를 입력하면 “Fatal error: Unable to find Gruntfile.” 과 같은 에러가 발생한다.
– Gruntfile.js를 비어있는 상태로 만든 뒤(touch 또는 copy con 이용) 같은 명령어를 입력하면, “Warning: Task “t” not found. Use –force to continue. Aborted due to warnings.” 이라는 에러가 발생한다.
– grunt역시 node와 같은 인터프리터로 생각하면 될 것이며, grunt가 이해할 수 있는 문법으로 Gruntfile.js를 작성해 놓아야만 실행되게 된다!
4) Gruntfile.js 작성 기초
– 빈 파일에서부터 시작해보자.
– Gruntfile.js에 다음 코드를 추가한다.
– module.exports = function(grunt){ grunt.registerTask(‘f’, []); };
– 위 코드에 exports된 function 자체에 첫번째 인자로 grunt를 넣으면 자동으로 grunt 모듈을 사용할 수 있으며
– 함수 내부에서 그 객체를 이용하여 스크립트를 작성할 수 있다.
– grunt.registerTask(‘f’, []); 이 문장은, 말 그대로 grunt의 task를 등록하는 개념으로 사용된다. 첫번째 인자는 이름이고, 두번째 인자는 수행 항목들(배열)이다.
– 수행 항목들은 규칙에 맞는 배열 내 객체들이라면 무엇이든 여러개를 연속해서 나열할 수 있다.
– 위와 같이 파일을 작성한 뒤 실행해보자. Done. 이라는 메시지가 콘솔에 출력된다.
– 일반적으로 Gruntfile.js 는 아래와 같은 구조를 가진다.
module.exports = function(grunt){
grunt.loadNpmTasks(…);
grunt.initConfig(…);
grunt.registerTask(…);
};
5) grunt로 쉘 스크립트 실행. (윈도우에서도 사용할 수 있다!!)
– 이것은 grunt의 플러그인을 사용하여 수행할 수 있다. (뭐 직접 만들어도 되겠지만..우선 받아서 사용해보자.)
– 패키지명은 grunt-shell이다.
– npm install grunt-shell –save-dev 명령어를 수행하여 설치한다.
– 이제 grunt에서 shell이라는 플러그인을 사용할 수 있다.
– 이 플러그인은 Gruntfile.js의 grunt.initConfig 메소드 내의 객체로 하나를 정의하여 실행시키도록 할 수 있다.
– Gruntfile.js를 아래와 같이 작성해본다.
module.exports = function(grunt){
//grunt가 추가적으로 loading시킬 npm modules for grunt 리스트.
grunt.loadNpmTasks('grunt-shell');
//loadNpmTasks로 불러들여온 grunt 모듈의 task들을 아래에서 호출.
grunt.initConfig({
shell: {
makeDir: {
command: [
'mkdir javascript',
'mkdir css',
'mkdir html'
].join('&&')
},
delDir: {
command: [
'rmdir javascript',
'rmdir css',
'rmdir html'
].join('&&')
}
}
});
//사용자 정의 task를 등록하여 이름을 지정, 커맨드라인에서 호출할 수 있게 함.
grunt.registerTask('make', ['shell:makeDir']);
grunt.registerTask('del', ['shell:delDir']);
};
– cmd(또는 shell)에서 grunt make 입력 후 엔터 시 다음과 같은 메시지 확인 가능
Running “shell:makeDir” (shell) task
Done.
– dir(또는 ls -al) 명령어를 통해 디렉토리가 잘 생성되었는지 확인
– grunt del 입력 후 실행시켜 생성되어있던 디렉토리가 삭제되었는지 확인
– Hello World 종료!
- 기타 grunt 플러그인
1) grunt-contrib-connect : 파일 지원용 서버 (Grunt를 서버로 동작하게 만들어준다)
2) grunt-contrib-watch : 파일의 변화를 감지해서 무언가 해주기 위한 플러그인
최근 댓글