grunt-plato란?

plato라고 하는 툴로부터, JavaScript 코드의 소프트웨어 메트릭스를 계측해, HTML로 리포트를 생성해 주는 Grunt 플러그인입니다.

htps : // pmjs. 오 rg / pa c 게이지 / g run tp
htps : // 기주 b. 코 m / j 소 ゔ r 쏘 / g 룬 t p ぁ

plato란?

위에서 거의 썼습니다만, plato는 JavaScript 코드의 소프트웨어 메트릭스를 계측해, HTML로 리포트를 생성해 주는 Node제의 툴입니다.
htps : // 기주 b. 코 m / 에 s 아나 ly s / p ぁ

plato에서는 jQuery, Grunt, marionette의 리포트를 샘플로서 공개해 주고 있으므로, 우선은 이것들을 보고, 어떤 것인지 알게 됩니다.
htp : // 에 s 아나 ly s. 기주 b. 이오 / p ぁ와 / 에 mp ぇ s / j 쿠에 ry /
htp : // 에 s 아나 ly s. 기주 b. 이오 / p ぁ와 / 에 mp ぇ s / g 룬 t /
htp : // 에 s 아나 ly s. 기주 b. 이오 / p ぁ와 / 에 mp ぇ s / 마리오네와 /

소프트웨어 메트릭이란?

소스 코드의 품질을 다양한 관점에서 수치화하여 정량적으로 평가하는 측정법입니다.
LoC나 Cyclomatic Number라는 표현은 잘 눈에 띈다고 생각합니다만, 전형적인 메트릭스로서 아래와 같은 것을 들 수 있습니다. (Wikipedia에서 인용)

ㅡtp://그럼.ぃきぺぢ아. 오 rg / 우키 / % 3 % 82 % BD % 3 % 83 % 95 % 3 % 83 % 88 % 3 % 82 % 6 % 3 % 82 % 7 % 3 % 82 % A 2 % 6 % B8 % A C % E 5 % A % 9 A % E 6 % B3 % 95
* 성장 주문(알고리즘 해석, O기법 등 참조)
* 소스 코드의 행 수 (LoC)
* 순환 복잡도(Cyclomatic Number)
* 기능 포인트법
* 소스 코드 행당 버그 수
* 코드 망라율
* 고객 요구 사양의 행 수
* 클래스 및 인터페이스 수
* Robert Cecil Martin의 소프트웨어 패키지 측정 방법
* 응집도
* 결합도

소프트웨어 메트릭에 대해서는 2005년과 오래되었지만 이 기사는 읽기 쉽습니다.
첫 소프트웨어 메트릭
h tp // w w. 아니. 이. jp / m / rc c / s / 0507/22 / 네 ws101. HTML

plato로 측정할 수 있는 지표

Maintainability - 유지 보수성 ( htp://bgs. msd 응. 코 m/b/코데아나 ly 하고 s/아 r ゔぇ/2007/11/20/마이 타이나비 ぃty- 어서 x-랑게-안 d-메아닌 g. 아 spx )

Lines of code - 소스 코드의 행수(LoC)

Estimated errors in implementation - 견적 오류 수( h tp : // 엔.ぃきぺぢ아. 오 rg / ぃ き / ㄴㄴㅎㅎㅎㅎ )

Lint errors - JSHint 오류

info 마크에 hover하면 간략한 설명을 볼 수 있고, 클릭하면 각 메트릭의 해설 페이지를 볼 수 있습니다.

소개

설치

npm install에서 grunt-plato를 설치합니다. package.json의 devDependencies에 추가되도록 --save-dev 옵션을 잊지 마십시오.

% npm install grunt-plato --save-dev

Gruntfile.js

grunt-plato 작업을 로드하도록 추가하고 plato 작업을 정의합니다.
여기서는 docs/report/plato 디렉토리에 plato 보고서를 생성하려고합니다.
실제로는, 그 밖에도 여러가지 문서나 리포트를 생성하기 때문에 계층을 나누고 있습니다.

module.exports = function(grunt) {
  grunt.initConfig({
    plato: {
      options: {
        jshint: grunt.file.readJSON('.jshintrc'),
        complexity: {
          logicalor: true,
          switchcase: true,
          forin: true,
          trycatch: true
        }
      },
      dist: {
        files: {
          'docs/report/plato': [’src/**/*.js', 'test/**/*.js']
        }
      }
    }   
  });
  grunt.loadNpmTasks(‘grunt-plato');
}; 

.jshintrc

JSHint에 의한 Lint 체크를 하기 때문에, .jshintrc 파일을 정의합니다.
선택하지 않으면 jshint: false로 설정하십시오.

JSHint의 코딩 규칙 설정은 여기를 참조하십시오.
h tp // w w. j 신 t. 코 m/도 cs/오 p치온 s/

{
  curly: true, 
  eqeqeq: true, 
  immed: true, 
  latedef: true,
  newcap: true,
  noarg: true,
  sub: true,
  undef: true,
  boss: true, 
  eqnull: true, 
  node: true,
  es5: true
}

실행

% grunt plato

프로젝트의 자바스크립트 코드에 대해 아래 예제와 같은 보고서가 생성됩니다.
htp : // 에 s 아나 ly s. 기주 b. 이오 / p ぁ와 / 에 mp ぇ s / g 룬 t /

요약

자바스크립트 코드의 메트릭스를 계측함으로써 「불길한 냄새」가 보이게 되어 리팩토링하는 포인트를 명확하게 할 수 있습니다.
지금까지 '어쩐지' 리팩토링하지 않았습니까?
h tp // w w. 오, cctc b. jp / te ch 또는 l c / Rep c와 Rin g / Rep c cts

과거의 계측 결과도 그래프에 표시되어, 시간의 경과와 함께 개선해 왔는지 악화해 왔는지가 보이고, 코드의 품질에 지금까지 이상에 주의할 수 있다고 생각합니다.

Tips

Jenkins의 작업에 통합 할 때 HTML Publisher Plugin을 설치하고 grunt-plato가 생성하는 보고서의 HTML 파일을 Publish HTML reports로 지정하면 멤버간에 보고서를 함께 볼 수 있다고 생각합니다.
htps : // 우우키. 지킨 킨 s. 오 rg / ぢ sp ぁ y / 지 킨킨 S / HTML + 푸 b ぃしぇ r + P ㎅

Appendix

Grunt Plugins
htp : // g run tjs. 코 m / p ㅅ 긴 s