JenkinsでStyleDoccoを使い、スタイルガイドを作成する

まえおき

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)が出ているのでそれをクリックするとガイドが読める。素晴らしい。