gulpを使ったsassのBootstrapの環境

スポンサーリンク

概要

sassで書かれたBootstrapがあるのですが、私が普段、gulpを使って、このsassのBootstrapから、Bootstrapのスタイルシートを作成しているのかを書きます。

gulp使うために

gulpは、Node.jsを使ったビルドツールの一つです。

プログインを使ったり、設定をしたりすると、sassファイルのコンパイルやサーバの起動など、色々とできます。

今回は、gulpを使って、sassのBootstrapをコンパイルしていきます。

gulp自体は、Node.jsの環境を使うので、Node.jsのインストールが必要です。

Node.jsのインストールやgulpのインストールは、ネット上にたくさん情報があるので、ここでは書きません。

以降の説明では、すでにgulpが動くという前提で話をしていきます。

Bootstrapの入手

sassで書かれているBootstrapは、いくつかの方法で入手することができます。

今回は、公式サイトから入手します。

http://getbootstrap.com/getting-started/#download

上の方に、「Download Sass」と書かれたボタンがあるので、そこをクリックしてダウンロードします。

ダウンロードが終わったら、解凍します。

Bootstrapの配置

解凍した、一部のファイルをBootstrapを使いたいディレクトリへと移動させます。

後述するgulpの設定の関係上、できるだけ指定するディレクトリと同じ名前の場所に置くようにしてください。

最初に、assetsディレクトリのstylesheetsディレクトリの中身を、プロジェクトのsass/bootstrapディレクトリにコピーします。

次に、sass/bootstrapディレクトリの_bootstrap-compass.scssというファイルをbootstrap.scssという名前でコピーします。

そして、assetsのjavascriptディレクトリからbootstrap.min.jsをプロジェクトのscriptsディレクトリにコピーして、さらにjavascriptディレクトリ中のbootstrapディレクトリをそのままscriptsディレクトリのbootstrapディレクトリにコピーします。

最後に、assetsのfontsディレクトリをそのままプロジェクトのfontsディレクトリにコピーします。

これで、bootstrapの配置は設定は完了です。

gulpの設定

この後は、gulpの設定をします。

sassのコンパイルのために、下記のコマンドを実行して、プラグインをインストールしておきます。

gulpの設定ファイルは、gulpfile.jsに書いておきます。

下記のように設定を書いておきます。

あとは、gulpfile.jsのあるディレクトリで、gulp bootstrapというコマンドを実行すれば、sassのBootstrapがコンパイルされて、stylesheetsディレクトリ上にbootstrap.cssと名前で作られます。

まとめ

今回行った作業を行った結果を下記のgitのリポジトリとして用意しておきました。

https://github.com/tmp1024/yoroi

なので、もし、今回の作業を行うのが面倒な時は、そのまま、gitのリポジトリを使ってみてください。

スポンサーリンク

シェアする

フォローする