Gruntfile.js에서 플러그인 자동 로드하기

요즘은 Grunt를 많이 사용하고 있는데 아주 잘 쓴다고 할 수는 없지만 그래도 이전에는 어떻게 프론트앤드를 자동화했나 싶을 정도로 유용하게 사용하고 있다. 이제 프로트앤드 쪽 빌드툴로는 확고히 자리를 잡은 듯하고 Grunt 플러그인도 수가 상당히 많아지면서 플러그인만 가져다 써도 간단한 작업만으로 생산성을 상당히 높일 수 있다.

Grunt를 쓰면서 귀찮은 작업중 하나가 새로운 플러그인을 추가하는 과정이다. 플러그인을 추가하려면 다음과 같은 과정을 거쳐야 한다.

1. npm install grunt-ANY-PLUGIN --save-dev로 플러그인을 설치한다. Grunt 플러그인은 모두 grunt로 시작하고 Grunt 팀에서 직접 관리하는 플러그인은 grunt-contrib-가 붙는다. 보통 Grunt는 빌드나 테스트용이므로 devDependencies로만 추가하는 것이 일반적이다. npm으로 설치하고 package.json에 의존성을 추가해도 되지만 귀찮으므로 --save-dev 옵션으로 설치하면서 바로 추가했다.
2. Gruntfile.js파일에서 grunt.loadNpmTasks('grunt-ANY-PLUGIN');라인을 추가해서 플러그인을 로드한다.
3. 마지막으로 해당 플러그인에 해당하는 설정을 Gruntfile.js에 추가한다.

아주 복잡한 과정은 아니지만 Grunt를 쓰다보니 항상 까먹는게 2번의 과정이다. 항상 설정 추가하고 실행했다가 오류나는 걸 보고 다시 들어가서 grunt.loadNpmTasks()를 추가하게 되서 불편했는데 최근에 Sauce Labs연동작업을 하다가 Sauce Labs의 문서에서 흥미로운 코드를 발견했다.

1
2
3
4

//`grunt.loadNpmTasks('grunt-ANY-PLUGIN');`
for (var key in grunt.file.readJSON("package.json").devDependencies) {
  if (key !== "grunt" && key.indexOf("grunt") === 0) grunt.loadNpmTasks(key);
}

각 모듈마다 일일이 grunt.loadNpmTasks()라인을 추가하는 대신에 위의 코드를 추가하면 자동으로 grunt 플러그인을 로딩한다. 코드를 보자면 package.json파일을 읽어와서 devDependencies의 키값을 순회하면서 grunt모듈은 아니지만 grunt라는 문자열이 있는 모듈을 모두 로드하는 코드이다. 이 코드를 추가하면 앞에서 설명한 3단계 과정에서 2번 과정을 생략하고 npm으로 모듈 설치후 바로 설정만 추가하면 된다.(당연히 grunt 모듈을 devDependencies로 추가하지 않았다면 dependencies로 바꾸어야 한다.