Bootstrap4をSublimetext3とGulp（ガルプ）でコンパイル

Bootstrap4を使ってみようかな・・・・というわけで、bootstrap-magicというBootstrap 4.0のデザインがカスタマイズできる商用でも無料のオンラインツールを利用して、サイト作成を始めました。

が、今まで3.3.7verを使っていたので、Sassとかコンパイルが・・・・・謎の状態に。

いろいろ調べていくと　Nodo.js とか　Physonとか　開発ゴリゴリの名前が出てくるじゃないですか・・・
どうしようかな～～とAdobeツールとか調べても　今のDreamweverは　まだ3.3.7verの対応なのでコンパイルはいろいろ難しいことをしないとダメっぽいということがわかりました。

というわけで、まずNode.js をインストールするという手順から。

Node.js のサイトからダウンロードしてインストールします。

ここから、Physonやらいろいろ入れないといけないらしいのですが、Windowsでは　コマンドプロンプトに

npm install --global windows-build-tools

と入力します。

そうすると、いろいろとC++コンパイラやPython2.7をインストールしてくれるのです。

インストールが終わったら、コマンドプロンプトに以下のコードを書きこみます。

npm version

きちんとインストールされているとヴァージョンNOなどが表示されます。

ここからいろいろ調べましたが、コマンドプロンプトとの併用がデフォルトのようです。

まずbootstrap 4をダウンロードします。ダウンロードするのはSource filesです。

ダウンロードしたzipファイルを解凍し、展開しておきます。

次に、プロジェクトフォルダ（コンテンツフォルダ）を作成して、その中に展開したbootstrapのフォルダをコピーします。

コマンドプロンプトで　ディレクトリチェンジしてプロフェクトフォルダに移動します。

移行した場所にpackage.jsonファイルを作ります。
下記コードをコマンドプロンプトに打ち込みます。

npm int -y

次に、プロジェクト内でGulpとgulp-sassを使えるようにします。

npm install -D gulp gulp-sass

-Dというコマンドはローカルインストールで、現在のディレクトリにインストールします。複数のプロジェクト先がある場合などは、こちらでインストールすることが望ましいです。
※ちなみに、グローバルインストール　の場合　-g　となります

続いてgulp-autoprefixerをインストールします
Autoprefixerというのは、Bootstrap 4から実装されたベンダープレフィックス付与を自動で設定してくれるプラグインです。

コマンドプロンプトに下記のコードを入力します。

npm install -D gulp-autoprefixer

CSSコンパイルタスクの設定

タスクを実行するguipfile.jsを作成します。※gulpを使う場合は必ず必要となるファイルです。

プロジェクト直下にguipfile.jsを制作します。
jsファイルは下記のように記入します。

// 必要なプラグインを読み込む
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
// Sassをコンパイルするタスクを関数の中に書いていく
gulp.task("default", function () {
	gulp.watch('scss/*scss',function() {
	    gulp.src('scss/bootstrap.scss')
	    // コンパイル対象のSassファイル
	        .pipe(sass())//コンパイル実行
	        .pipe(autoprefixer())//ベンダープレフィックス付与
	        .pipe(gulp.dest('css/'));//cssフォルダに出力

	});
});

上記を上書き保存したら、小窓ラインでタスクを実行させます。
bootstrap.scssからbootstrap.cssがコンパイルされるタスクの実行

npx gulp

実行されると、bootstrap 4　フォルダ内にCSSフォルダができて、bootstrap.cssが作成されます。

Bootstrap Magicなどで作成したscssは、bootstrapフォルダ内のscssフォルダにある_custom.scssに追記してscssファイルを保存したあと
Gulpを使うことでコンパイルされます。

npx gulp

一回で使いこなせる感じではないですが、コマンドプロンプトと仲良くなりましょう。

ちなみに、Bootstrap Magicでカスタマイズしたscssですが、若干gulpのエラーが出ました。

$link-color

theme-color('primary')

という記述がエラーとなったので、色指定を別途したら大丈夫でした。

さらにspacingの再記述もうまく動かなかったので、Bootstrap Magicで作ったscssから

// Spacing
$spacer: 1rem;
$spacers: (0: 0, 1: ($spacer * 0.25), 2: ($spacer * 0.5), 3: $spacer, 4: ($spacer * 1.5), 5: ($spacer * 3));
$sizes: (25: 25%, 50: 50%, 75: 75%, 100: 100%);

上記の記述を削除した_custom.scssを上書き保存し、

npx gulp

上記コードをコマンドプロンプトに入力すると、新しいbootstrap.cssがコンパイルされました。