レスポンシブなデザインのサイトがすぐ作れちゃうと噂のBootstrapをなんとなくいじってみよう、思ったのですが、ふつうに公式のチュートリアル通りにやるとLESSとGruntを使うことを強いられてしまうので、
・Sassがいいな
・ついでにGruntの代わりにgulpを使ってみたいな
と思っていたらこんなどんぴしゃな記事を見つけました。ないすでーす。
http://ericlbarnes.com/setting-gulp-bower-bootstrap-sass-fontawesome/
基本これ通りにやればおkだったのですが、gulp-ruby-sassを実行するところでちょっと詰まったので以下はそのメモ。
##Error: Missing the Sass executable… のエラー
gulp-ruby-sassを使うのにsassをインストールする必要があったので以下を実行。
sudo gem install sass
##gulp-ruby-sass: stderr: OptionParser::NeedlessArgument: needless argument: --update=: ... のエラー
環境によっては出ないのかもしれないけど自分の場合これが出て結構長いことはまってました。
https://github.com/sindresorhus/gulp-ruby-sass/issues/145
gulp-ruby-sassのバージョンがデフォルトで0.7.1だったのですが、1.0より前のバージョンはもうサポートしないよ、と公式に書いてることに気づき、以下を実行。
npm install --save-dev gulp-ruby-sass@1.0.0-alpha
それに付随してgulpfileの書き方も変わったみたいなので以下のような感じに変更
gulp.task('css', function() {
return sass(config.sassPath + '/style.scss', {
style: 'compressed',
loadPath: [
'./resources/sass',
config.bowerDir + '/bootstrap-sass-official/assets/stylesheets',
config.bowerDir + '/fontawesome/scss'
]
})
.on("error", notify.onError(function (error) {
return "Error: " + error.message;
}))
.pipe(autoprefix('last 2 version'))
.pipe(gulp.dest('./public/css'));
});
…で、ようやく動いてくれました。