Google web starter kit を触っていて、gulpとstyledoccoという素敵ツールを知ったのでhtml5 boilerplateをベースにsassとgulpを導入してstyledoccoでstyleguideも自動生成する、というのを作ってみました。（・・・Google web starter kitをベースにする方が早い気もするのですが、モジュールやらコンポーネントの内容やSassの構成とかがイマイチ凡人には理解しかねたので今後のアップデートに超期待しています。）
といっても、ほぼGoogle web starter kit のgulpfile.jsをぱく・・・参照させていただいております。ディレクトリを変えて、styledoccoのためのソースを加えただけ。
手順
前準備：gulpは公式を参照に予めインストールしているとして。
1. 先ずはHTML5 boilerplateをダウンロード。
プレーンなやつを。お好きなディレクトリ（ここではappディレクトリ）に展開してください。
2. いっこ上のディレクトリにgulpfile.jsをおきます。
Google web starter kitから中身を有難く頂戴してコピペしディレクトリ名とかをコソコソ書き換えます。（本来は、gulpをイチから学ぶ方が今後のために良いと思いますが！）
3. ターミナルなどを使ってコマンドラインからgulpをたたいてみます。
gulp
エラーは大抵gulpのプラグインが無いってやつだと思うので該当プラグインをガシガシ入れていきましょう。
（私はsassファイルの拡張子(scss)を間違えたり、消したファイルを参照していたりドジばっかりしていたので、いっろいろ怒られましたが…。）
※注：・・・あとで気が付きましたが、gulp-load-pluginsていう便利なものがあるそうで、Google web starter kit もこれを使ってますね・・・。package.jsonに書いておいて一括インストールとかも出来るそうです・・・。ぜひそちらをオススメします。
4. そしてgulp-styledoccoも入れます。
npm install gulp-styledocco --save-dev
gulpfile.jsにstyledoccoのタスクを追加します。
watchしてくれるように、serveにも追加しちゃいましょう。
//（前略）
var styledocco = require('gulp-styledocco');
//Style Guide
gulp.task('styledocco', function () {
gulp.src('app/css/main.css')
.pipe(styledocco({
out: 'docs',
name: 'yourProjectName'
}));
});
//（中略）
// Watch Files For Changes & Reload
gulp.task('serve', function () {
browserSync.init(null, {
server: {
baseDir: ['app', '.tmp']
},
notify: false
});
gulp.watch(['app/**/*.html'], reload);
gulp.watch(['app/css/**/*.{css,scss}'], ['styles','styledocco']);
gulp.watch(['.tmp/css/**/*.css'], reload);
gulp.watch(['app/js/**/*.js'], ['jshint']);
gulp.watch(['app/img/**/*'], ['images']);
});
//（後略）
5. HTML5 boilerplateのCSSをいい感じにSASSに変えていきます。
私は単純にcssディレクトリ内にsassディレクトリを作ってbase、helper、printとかに適当に分けてmain.sassにimportするという適当な構成にしましたが、mixinとか使ってきっちり作っている方もいらっしゃるのでご参照ください。
xtine/compass-sass-html5boilerplate
これはcompaass使っているバージョンなのでsassの構成だけ参照するといいんじゃないでしょうか。
6. gulpfile.jsのSASSのコンパイル関連をちょっと弄ります。
私の構成の場合はmain.sassだけ見てくれればいいので、
//Compile Sass for test
gulp.task('styles:test', function () {
return gulp.src('app/css/sass/main.scss')
.pipe(sass({style: 'expanded'}))
.pipe(gulp.dest('app/css'));
});
とかいうtaskを作って
// Output Final CSS Styles
gulp.task('styles', ['styles:test', 'styles:css']);
stylesタスクを書き換えちゃいます。
7. ビルドするときのcssファイルを変更。（追記: 2014-07-07 13:07）
gulpfile.jsのhtmlタスクをちょっと弄ります。
replaceのファイル名と、minifyHtmlのオプションを追加（IEのコンディショナルコメントを残すため）。
// Scan Your HTML For Assets & Optimize Them
gulp.task('html', function () {
return gulp.src('app/**/*.html')
//（中略）
// Update Production Style Guide Paths
.pipe($.replace('css/main.css', 'css/main.min.css'))
//（中略）
// Minify Any HTML
.pipe($.minifyHtml({conditionals:true}))
//（中略）
});
このままビルドすると怒られるので、HTMLのstylesheetのlinkタグらへんを弄ります
<!-- build:css css/main.min.css --> <link rel="stylesheet" href="css/main.css"> <!-- endbuild -->
8. gulpにwatchして貰いながらレッツコード！
gulp serve
としてレッツコード！保存したら、sassをコンパイルしてくれて、自動でリロードして、スタイルガイドも更新される！素敵！あ、画像の最適化もしてくれるよ！
9. ビルド
gulp build
でdistディレクトリ以下にビルドしてくれます。
感想
gulp.jsは、Codekitのお手軽さに比べると、バリバリこまんどらいんでひくとは思いますが、慣れるとこっちのがシンプルで良いような気がします。文法はJSだし、カスタムバッチコーイな感じも良い。
私的にはstyledoccoが素敵過ぎる。styledocco入れるとcss（sass）の書き方が変わると思う。今度こそまじめにモジュール化していこう。
・・・全部のソースをGithubにアップしたらいいやんとも思ったのですが、あんまりに寄せ集めなのでtipsを記録がてら書きだすだけにしました。きっともう少ししたら、こういうパッケージをえらいひとがちゃんと作ってくれるはず。
