30
29

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

gulp、SassでBootstrapをセットアップしたときのメモ

Last updated at Posted at 2014-11-25

レスポンシブなデザインのサイトがすぐ作れちゃうと噂の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の書き方も変わったみたいなので以下のような感じに変更

gulpfile.js
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'));
}); 

…で、ようやく動いてくれました。

30
29
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
30
29

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?