ドキッ、styledoccoのstyles大会 ~gulpもあるよ!~

styledocco

スタイルガイド製本でお馴染みstyledoccoさん。ドッコさん+stylusで検索をかけてみると一部で相性が悪いとか対応してないだとか書かれていますが、ドッコさんのプリプロセッサは原始的にcmdへ入力を送っているだけなので、まず相性の問題はあり得ません。正しいコマンドで普通に利用できると思いますので、ドッコさんをぜひ酷使してあげて下さい。

環境

今回の環境はwin7(64bit)
すでにnode.jsが入っている状態になります。
あと、gulpはあるけどポロリはないです。

global-install

本陣を敷きます。
gulpも利用するなら、ここで入れてしまいましょう。

global install
npm i -g stylus
npm i -g styledocco
npm i -g gulp

stylus -V
styledocco --version
gulp -v

local-install

任意の作業ディレクトリを作成し、戦場へ出陣します。gulpを利用するなら、本陣と同じバージョンを導入。styledoccoのみなら何も入れなくていいです。

mkdir "C:\coding\test"
cd "C:\coding\test"
gulpを利用する場合
gulp -v
[version確認]
npm i gulp@[version入力] -D
npm i gulp-styledocco -D
type nul > gulpfile.js
npm init

winのコマンドプロントはtouchコマンドが使えないのでtype nul。もしgitBashを使用するならtouchでイケます。

styledocco起動

いよいよドッコさんを働かせます。gulpを利用するにしても、大元が動いてないと当然gulpでも動かないので動作確認しておきます。
変換前のファイルを格納する『dist』フォルダを作成。その中にスタイルガイド用のファイル(stylファイル)を置きます。

フォルダ作成

distフォルダ作成
mkdir "dist"
type nul > "dist/test.styl"
test.styl
/*
# docco

comment

.inner_text white text

``` <div class="box"> <p>box</p> </div> <div class="box2 inner_text"> <p>box2</p> </div> ```
*/


p
font-weight bold
font-size 13px

.box,
.box2
padding 20px
width 100%

.box
background #ccc

.box2
background #333

.inner_text
color #f2f2f2

stylus.cmdのpath

preprocessorに指定する『stylus.cmd』のパスを探します。

stylusを探す
which stylus
'witch' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチファイルとして認識されていません。

……whichコマンド使えないとか、ぱないっすね。
せっかくなのでwhichコマンド(batファイル)を作ります、作っといて損はないですきっと。適当な場所に自作コマンド用のフォルダを作成。パスを通すので、通しやすい場所にしてね。

which.bat作成
mkdir "C:\coding\cmd"
cd "C:\coding\cmd"
tyle nul > which.bat

@echo off
for %%I in (%1 %1.com %1.exe %1.bat %1.cmd %1.vbs %1.js %1.wsf) do if exist %%~$path:I echo %%~$path:I

※この2行の内容をファイルwhich.batとして保存すること

ファイル作成が面倒くさい人はダウンロード
作ったら環境変数でパスを通して、コマンドプロント再起動。

stylusのパスを探す
which stylus
C:\coding\npm\stylus.cmd

この一連が億劫なら、もう自力で探してちょんまげ。
グローバルパスのnpm直下にstylus.cmdがいます。

whichを使わない場合
npm -g root
[global root]
explorer [global root]

stylus.cmdのフルパスを控えておいて下さい。

styledocco-command

本命のコマンドを唱えます。

styledocco コマンド
styledocco -n "プロジェクト名" --preprocessor "<styles.cmdのフルパス> -p" --verbose true --no-minify "変換するファイル"
私の場合
styledocco -n "test" --preprocessor "C:\coding\npm\stylus.cmd -p" --verbose true --no-minify dist/test.styl
styledoccoコマンド 説明
—name(-n) プロジェクト名
—out(-o) 出力先
—preprocessor 変換(cmd)ファイル
—include プレビューにcss,jsを読み込む
—verbose 変換ファイルをログに出力
—no-minify プレビューファイル(html)を圧縮しない
stylesコマンド 説明
—print(-p) Print out the compiled CSS
docsファイルが作成されて、その中にスタイルガイドが製本されているハズです。stylusで記述したクラスが効いているか(cssに変換されているか)確認して下さい。ちなみにpreprocessorでパスの後に『-p』オプションが必要になります。こちらはstyledoccoのオプションではなくて、stylusのオプションです。

gulp

gulpを使って人間の作業を減らしましょう。

gulp-styledocco-index.js

というわけで、新兵器gulpで戦場に臨みます。
まず、gulp-styledoccoはデフォルトだとpreprocessorにダブルクォートが付いていない(=オプションが付けられない)です。stylusの変換には『-p』オプションが必要なので、このままだと非常にメシマズなのです。もしかしたら後々になってgithubのgulp-styledocco自体が修正されるかもしれませんが、念のために確認しておいて下さい。

作業フォルダ内
『node_modules>gulp-styledocco>index.js』
を編集します。

gulp-styledocco>index.js 51行目
if (opts.preprocessor !== null) {
args.push('--preprocessor', opts.preprocessor);
}
gulp-styledocco>index.js 修正
if (opts.preprocessor !== null) {
args.push('--preprocessor', '"' + opts.preprocessor + '"');
}

gulpfile.js

gulpにドッコさんの設定を前もって断っておきます。preprocessorのパスは各々で記入して下さい。

gulpfile.js
var gulp = require('gulp');
var styledocco = require('gulp-styledocco');

//Style Guide
gulp.task('default', function(){
gulp.src('dist/*.styl')
.pipe(styledocco({
out: 'docs',
name: 'styleguid',
preprocessor: 'C:/coding/npm/stylus.cmd -p',
verbose: true,
'no-minify': true
}));
});

gulp作動

一旦、先ほど生成した『docs』フォルダを削除し、もう一度gulpでドッコさんが正常に動くか試してみます。

gulp作動
gulp

stylusで記述したクラスが効いているか(cssに変換されているか)をしっかり確認して下さい。

gulp-nib

stylusオプションはpreprocessorに追記でいけます。
※オプションはパスの後に付けてください。

preprocessor
preprocessor: 'stylus.cmd -u nib -p'

gulp-watch

確認中