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でジョブを作成
の前にプラグインを追加
これを使うとjenkinsの画面でhtmlファイルを指定してあげると見ることが出来るようになる。素晴らしい。
ジョブ作成
gitプラグインなりなんなりで対象ソースを取得したあと、シェルでnpm installし、gruntを実行する。
ビルド後の処理で「publish html reports」を選択
gruntで作成するdocs配下のindex.htmlをindex pageに設定する
実行結果を見る
Style guide(上記Report title)が出ているのでそれをクリックするとガイドが読める。素晴らしい。
Author And Source
この問題について(JenkinsでStyleDoccoを使い、スタイルガイドを作成する), 我々は、より多くの情報をここで見つけました https://qiita.com/kz_kazuki/items/fa5bb708f9906d1936f1著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .