bower経由でインストールしたbootstrap-sassをgulpでコンパイルする

※ 今回の私の記事はMacのローカルへのインストール作業に基づいて書かれています。
また、node と npmはすでにインストールされている状態とします。

Bower のインストール

念のため、Bowerを入れるところから。
補足：package.jsがある階層と同じ階層がよいでしょう。

$ npm install bower -g
$ bower init

$ bower init ですがいくつかの質問を聞かれます。
他人様の記事ですが、こちらの記事を参考にされるとわかりやすいかと思います。
http://qiita.com/oreo3@github/items/eb790fc091aa28af8d33#%E5%88%9D%E6%9C%9F%E5%8C%96%E6%99%82%E3%81%AE%E8%B3%AA%E5%95%8F

bootstrap-sassの用意

現行のbootstrap-sassのソースを用意します。

$ bower install bootstrap-sass-official --save

--save オプションでbower.jsonに追記も行います。

sassファイルのコンパイル準備

bootstrap 系のsassファイルは以下のディレクトリにあります。
bower_components/bootstrap-sass/assets/stylesheets

これから変換用のbootstrapファイルの用意します。

$ mkdir sass
$ mkdir sass/bootstrap
$ cp bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss sass/bootstrap/_bootstrap-custom.scss

_bootstrap.scssはbootstrapのコンポーネントをすべて読み込む記述が書いてあり、
ここでコピーした_bootstrap-custom.scssの中身をいくつかコメントアウトして、
必要なコンポーネントを選別すると良いと思います。
補足：sassは『 _ 』から始まるファイルはscssの@importでの読み込み用のファイルになります。

私、最初はbower_components/bootstrap-sass/assets/stylesheetsにファイルをコピーしたりしてたのですが、bower_components配下はgitとかでコミットするようなモノじゃないと後から気付いたので、sassディレクトリなどを作って逃がしておいた方がいいです。

次にコンパイル対象にするscssファイルである、bootstrap.scssを追加します。

$ cd sass/bootstrap/
$ vim bootstrap.scss

bootstrap.scss

@import "bootstrap-custom";

先ほどの補足で述べたようにファイル名の『 _ 』は@importでの読み込み用のプリフィックスなので、ここでは@importのファイル名に_をつけなくても補完して読み込んでくれます。

Gulpのインストール

次にGulpのセットアップをしていきます。
ついでにminifyとvender prefixも自動でやってくれるようにしてみます。

$ npm install gulp -g
$ npm install gulp --save-dev
$ npm install gulp-sass --save-dev
$ npm install gulp-clean-css --save-dev
$ npm install gulp-autoprefixer --save-dev

Gulpはグローバルインストールのほかにもlocalのインストールも必要らしいです。
※ もしかしたら**$ npm install gulp --save-dev**の代わりに、こちらの方法でも良かったかもしれません（未検証）
http://qiita.com/ritukiii/items/921521f634e339550861

gulpfile.js作成

bower.jsonと同じ階層でgulpfile.jsを作成します。

$ vim gulpfile.js

gulpfile.js

var gulp = require("gulp");

// sass compiler
var sass = require("gulp-sass");

// add vender prifix
var autoprefixer = require("gulp-autoprefixer");

// css minify
var cleanCSS = require('gulp-clean-css');

gulp.task("bootstrap", function() {
    gulp.src("sass/bootstrap/bootstrap.scss")

       .pipe(sass({
                includePaths: ["bower_components/bootstrap-sass/assets/stylesheets"]
        }).on('error', sass.logError))
        .pipe(autoprefixer())
        .pipe(cleanCSS())
        .pipe(gulp.dest("./css"));
});

ちなみに、gulp.srcで指定するファイルは、scssの場合『 _ 』から始まるファイルはscssの@import記述用のファイルと見なされ、Gulpのコンパイル対象からも外れます。

早速gulpを実行してみましょう。

$ gulp bootstrap

これでcss/ディレクトリにbootstrap.cssファイルが生成されたはずです。

補足：gulp.task("hogehoge", function() {...});のhogehogeがタスク名になります。

$ gulp hogehoge

と実行する事で指定したタスクが実行されます。

終わりに

以上で、『bower経由でインストールしたbootstrap-sassをgulpでコンパイルする』環境が整いました。

引き続き、scssのファイルをwatchするように設定するなどして環境を整えるとさらに良いと思います。