Grunt, 자바스크립트 빌드 도구

Task 수행을 위한 Gruntfile.js 수정

grunt-shell을 위한 Gruntfile.js 수정

이제 first란 태스크를 수행하기 위해 grunt-shell 플러그인에 필요한 정보를 Gruntfile.js에 기술해야 한다.

Gruntfile.js은 다음과 같은 구조를 가지게 된다.

수행해야 하는 플러그인 태스크의 정보 - grunt.initConfig();
수행해야 하는 플러그인 로드 - grunt.loadNpmTasks();
grunt 사용자 태스크 정의 - grunt.registerTask();

보통은 다음과 같은 Gruntfile.js 파일 구조를 가지게 된다.

module.exports = fnction(grunt){

    grunt.initConfig(...);

    grunt.loadNpmTasks(...);

    grunt.registerTask(...);

};

자동 디렉토리 생성 구현

디렉토리 자동생성을 수행하기 위한 Gruntfile.js 파일을 다음과 같이 만든다.

[Gruntfile.js]

module.exports = fnction(grunt){

    grunt.initConfig({
        shell: {
            first: {
                command: [
                    'mkdir javascript',
                    'mkdir css',
                    'mkdir html'
                ].join('&&')
            }
        }
    });

    grunt.loadNpmTasks('grunt-shell');

    grunt.registerTask('first', ['shell:first']);

};

우선 태스크 선언 부분 부터 보자.

grunt.registerTask('first', ['shell:first']);

이 선언은 grunt first 란 명령을 수행할 때 first 라는 것을 어떻게 해석하는 것인가를 기술하는 것이다.

수행 항목은 []을 이용해서 지정하는데 여기서는 한개밖에 지정하지 않고 있다. 바로 shell:first 이다.

첫번째 'shell 문자열'은 shell 이라는 플러그인 태스크를 지정한다.

이 부분이 동작하기 위해서는 grunt-shell 플러그인이 로드 되어야 하므로

grunt.loadNpmTasks('grunt-shell');

를 Gruntfile.js 에 기술하여 플러그인을 로드한다.

shell 플러그인 설정 내용을

shell: {
    first: {
        command: [
            'mkdir javascript',
            'mkdir css',
            'mkdir html'
        ].join('&&')
    }
}

형식으로 기술한다.

각 플러그인에 필요한 형태는 공통된 형식이 없다. 그래서 Grunt 설정 문법은 따로 없다.

각각의 플러그인을 따로 따로 공부해야 한다.

grunt-shell 은

shell : {

}

형태로 기술한다.

그 다음에 이 안에 필요로 하는 명령 수행 구문을 정의한다.

first: {command:'echo "hello fisrt"'},

first 란 shell 하부의 태스크를 지정하고 command 속성을 이용해서 실제로 수행하는 쉘 스크립트를 지정한다.

이 쉘 스크립트는 "hello fisrt" 란 문자열을 echo 란 명령을 이용하여 화면에 출력하고 있다.

여기서는 몇개의 디렉토리를 생성하기 위한 명령을 여러개 수행하기 위해 command 속성에 배열을 사용했다.

shell: {
    first: {
        command: [
            'mkdir javascript',
            'mkdir css',
            'mkdir html'
        ].join('&&')
    }
}

그리고 배열에 join('&&')를 붙이는데... 이 의미는 전 실행이 성공했을때에만 다음 명령이 수행된다는 의미이다.

이렇게 Gruntfile.js을 만들고 실행하면 다음과 같이 수행 된다.

$ grunt first
Running "shell:first" (shell) task

Done, without errors.

에러없이 수행되었다는 심플한 메시지가 나온다.

정리를 하면,

Grunt 를 이용하여 무언가 수행하기 위해서는 플러그인을 사용하여야 한다.
플러그인 모듈은 npm 으로 설치되어야 한다.
플러그인은 Gruntfile.js 에서 grunt.loadNpmTasks()를 이용하여 로드 되어야 한다.
플러그인이 동작하기 위한 설정은 grunt.initConfig()를 이용하여 지정되어야 한다.
플러그인이 동작하기 위한 설정의 형식이나 내용은 각 플러그인의 규정으로 표준이 없다.
grunt 란 명령이 수행되기 위해서는 Gruntfile.js 파일이 필요하다.
수행명령은 grunt.registerTask() 함수를 이용하여 등록하며 이것은 grunt 외부에서 지정한다.