마에오키

Rails의 프로젝트에서 슬슬 CSS의 스타일 가이드 갖고 싶은 말을 하고 있었을 때와 어떤 사람에게 StyleDocco를 추천받았기 때문에.

Rails라고 KSS라든지 있습니다만, 스스로 view 쓰는 것도 생각하고, 우선 StyleDocco로 했습니다.

로컬에서 grunt watch하고 결과를 보는 것은 비교적 간단합니다만, 모처럼 Jenkins에서 CI하고 있기 때문에, Jenkins에서 결과를 볼 수 있으면 좋은 느낌이 된다고 생각 실험했기 때문에 그 결과입니다.

참고 url

STYLEDOCCO로 CSS 전처리기 스타일 가이드 만들기

코딩의 필수 도구가 될 것 같다. 멋진 CSS 스타일 가이드를 생성하는 "styleDocco"의 도입과 grunt.js에서의 자동화 메모

환경 구축

Jenkins 서버

npm, grunt-cli를 jenkins가 실행할 수 있도록하십시오.

grunt에서 StyleDocco를 사용하여 스타일 가이드 작성 작업 설정

디렉토리 구성

프로젝트의 적절한 곳에 디렉토리를 파고,

Gruntfile.js

package.json

놓다

Gruntfile.js

module.exports = function(grunt){

  grunt.loadNpmTasks('grunt-styleguide');
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.initConfig({
    styleguide: {
      dist: {
        name: 'Style Guide',
        options: {
          framework: {
            name: 'styledocco',
            options: {
              'no-minify': true,
              preprocessor: 'bundle exec sass'
            }
          }
        },
        files: {
          // 解析対象のscssファイルが置いてあるディレクトリを設定
          'docs': '../../app/assets/stylesheets/*css.scss'
        }
      }
    },
    clean: ['docs'],
    watch: {
        files: ['../../app/assets/stylesheets/*.scss'],
        tasks: 'styleguide'
    }
  });

  grunt.registerTask('default', [
    'clean',
    'styleguide',
  ]);
};

package.json

$ npm -save-dev 등에서 알맞게 만들어진 느낌.

{
  "name": "styledocco",
  "version": "1.0.0",
  "description": "styledocco",
  "author": "@author",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-styleguide": "~0.2.6",
    "styledocco": "~0.6.3"
  }
}

현지 실험

$ npm install
$ grunt

docs 밑에 HTML가 CSS의 파일 분 만들어지기 때문에, 그 안에 index.html를 본다. 훌륭합니다.

위의 Gruntfile에는 watch 태스크를 설정하고 있으므로, grunt watch 하면, 대상의 css 디렉토리내에서 변경이 있을 때마다 html을 다시 만들어 준다.

Jenkins에서 작업 만들기

앞에 플러그인 추가

html publisher plugin

이것을 사용하면 jenkins의 화면에서 html 파일을 지정해 주면 볼 수 있게 된다. 훌륭합니다.

작업 만들기

git 플러그인 나름대로 대상 소스를 취득한 후, 쉘로 npm install 해, grunt 를 실행한다.

빌드 후 처리에서 "publish html reports"를 선택

grunt로 작성하는 docs 아래의 index.html을 index page로 설정한다

실행 결과 보기

Style guide(상기 Report title)가 나와 있으므로 그것을 클릭하면 가이드를 읽을 수 있다. 훌륭합니다.