프로젝트 18일: Grunt - 자바스크립트 작업 실행기

개인 프로젝트 18일째, 오늘은 자바스크립트 작업 실행기(task runner), Grunt를 프로젝트에 적용했다. 자동화 테스트를 실행하거나, 자바스크립트 파일들을 합치거나 최소화하는 일처럼 자주 반복하는 프로젝트 수반 작업을 편리하게 실행할 수 있게 해주는 도구다.

Node 환경에서는, npm만으로도 충분할 수 있는데, Grunt에 몇 가지 마음에 드는 플러그인이 있어서, 곧바로 적용해 보기로 했다.

우선 npm으로 간단히 Grunt를 설치한다.

npm install -g grunt

Gruntfile 기본

Make를 쓸 때 Makefile이나 Rake를 쓸 때 Rakefile이 있듯, Grunt를 위해서는 Gruntfile.js가 있다. 프로젝트 디렉터리에 있는 이 파일을 기준으로 각종 작업을 실행한다.

Gruntfile.js 예제

module.exports = function(grunt) {
  // 작업을 위한 설정
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      build: {
        src: 'src/app.js',
        dest: 'build/app.min.js'
      }
    }
  });

  // "uglify" 작업을 위한 플러그인 등록
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // 기본 작업에 'uglify' 등록
  grunt.registerTask('default', ['uglify']);
};

위와 같은 Gruntfile.js를 프로젝트 최상위 디렉터리에 두고,

grunt

위의 명령을 실행하면, 아무 작업 이름을 주지 않았으므로 default 작업을 실행하려고 하며, 위 Gruntfile.js의 최하단에 명시한 대로 uglify 작업을 진행한다. 그러면, uglify 플러그인로 등록한 작업을 한다.

즉, 위 예제의 경우

grunt uglify

라고 실행해도 결과는 같다. 참고로 Gruntfile.js 대신 Gruntfile.coffee 파일을 준비해 둬도 그 역할은 같으며, 단지 자바스크립트 대신 커피스크립트 문법으로 해석한다.

Grunt 플러그인 추가

플러그인이 꽤 많았고, 그중 아래의 플러그인을 골라 설치했다.

이하는, 오늘 작성한 Gruntfile.coffee 파일의 일부다.

Gruntfile.coffee

module.exports = (grunt) ->
  js_files = ['app.js', 'lib/*.js', 'public/js/app.js']

  grunt.initConfig {
    # 중간 생략
    watch:  {
      coffee: {
        files: ["public/assets/*.coffee"]
        tasks: ["coffee", "uglify"]
      }
      jshint: {
        files: js_files
        tasks: ["jshint"]
      }
    }

    jshint: {
      all: js_files
    }
  }
  # 중간 생략
  grunt.registerTask 'default', ['coffee', 'uglify']

기본 작업에는 coffeeuglify를 걸어 두었고, 별도로 watch 작업을 추가해서,

grunt watch

를 실행해 두고, 커피스크립트 소스파일을 편집하면, 그 후 저장할 때마다, 즉시 커피스크립트 컴파일하며, jshint로도 바로 검사한다. 더 나아가, 셀프 테스팅 코드도 watch에 걸어두면, 그때그때 테스트 결과도 바로 확인할 수 있겠다.

Grunt, 쓸만한가?

npm의 script 섹션을 써도 웬만큼 다 되는데, 굳이 수고를 들여 별도의 작업 실행기가 필요할까? 잠깐 살펴보니, 그래도 될 거 같다. 우선 그 약간의 수고가 크지 않게 잘 만들어져있고, 문서화도 잘 돼 있다. 무엇보다, 플러그인이 많아서, 원하는 기능을 손쉽게 가져다 쓸 수 있다.

그리고, 참고로, Grunt (비공식) 한글 사이트도 있으니, 한글 문서로도 살펴볼 수 있어서 좋다.

오늘 작업을 포함해, 지금까지 진행하고 있는 내용을 GitHub에 올려놓고 있다.

https://github.com/hatemogi/holiday-project

진행하는 내용은, 어제 살펴본 Travis CI로 지속적으로 통합되며, Heroku에 이하 주소로 자동 스테이징되고 있다.

https://holiday-project-staging.herokuapp.com

오늘은 여기까지.

30일 프로젝트 글목록