Help us understand the problem. What is going on with this article?

Bootstrap 4のCSSコンパイルをGulpで管理する方法

More than 1 year has passed since last update.

Twitter社製UI作成フレームワークBootstrapの最新版「Bootstrap 4」では、SassをベースにしたCSS設計が可能です。Bootstrap 4にデフォルトで準備されているタスクランナーはGruntですが、簡潔な記述でかつ高速な処理が可能なGulpの方が今は人気で、Bootstrap 4のCSSコンパイルタスクもGulpで管理したいところです。本エントリーでは、Bootstrap 4のCSSコンパイルタスクをGulpで管理する方法を紹介します。


▲ GulpとGruntをGoogleトレンドで検索した結果。赤がGulp。(カテゴリ:コンピュータ、家電製品)

ソースファイルのダウンロードとGulpの準備

ダウンロードページの[Source files]より、Sassを含むファイル一式をダウンロードし、任意の場所に展開します。展開した場所でターミナルを起動し、Gulpを使う準備をします。Gulpの基本的な設定方法については記事「5分で導入! タスクランナーGulpでWeb制作を効率化しよう - ICS MEDIA」を参照してください。

npm init -y
npm i -D gulp

Sassをコンパイルするためにgulp-sassをインストールします。

npm i -D gulp-sass

Bootstrap 4では、面倒なベンダープレフィックス付与を自動で設定してくれる「Autoprefixer」を採用していますので、こちらも併せてインストールしておきます。Autoprefixerについては記事「CSSベンダープレフィックス(-webkit-)を今この瞬間に辞める為のAutoprefixerの導入とお薦め設定」を参照してください。

$ npm i -D gulp-autoprefixer

CSSコンパイルタスク

環境の準備が終わったら、Bootstrap 4のCSSコンパイルをGulpで管理するためのタスクを記述します。gulpfile.jsというJavaScriptファイルを新規作成し記述しておきます。

Bootstrap 4のSassは複数のscssファイルから構成されています。各ファイルはscssフォルダ以下に格納されており、「bootstrap.scss」が全てのファイルをインポートしています。したがって、bootstrap.scssをCSSにコンパイルし、Autoprefixerにてベンダープレフィックスを付与すればよいです。

▲ Sassファイル群

CSSをコンパイルするタスク

では、Bootstrap 4のSassファイルをCSSにコンパイルする下記のタスクを作成しましょう。

  1. SassをCSSにコンパイル
  2. ベンダープレフィックスを付与
  3. cssフォルダに出力
gulpfile.js
// 必要なプラグインを読み込む
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');

// Sassをコンパイルするタスク設定
gulp.task("default", function () {
    gulp.src('scss/bootstrap.scss') // コンパイル対象のSassファイル
        .pipe(sass())           // コンパイル実行
        .pipe(autoprefixer())   // ベンダープレフィックスの付与
        .pipe(gulp.dest('css/')); // cssフォルダに出力
});

タスクの記述後、下記コマンドにてSassファイルのコンパイルが行われ、cssフォルダに出力されます。

$ gulp

ファイルの更新を監視し、Sassをコンパイルするタスク

Sassファイルを更新する度に手動でコンパイルを実行する必要があって不便です。そこで、Sassファイルの更新があった場合に自動でコンパイルが実行されるようにしてみましょう。

gulpfile.js
gulp.task("default", function () {
    // scssフォルダを監視し、変更があったらコンパイルする
    gulp.watch('scss/*.scss', function() {
        gulp.src('scss/bootstrap.scss')
            .pipe(sass())
            .pipe(autoprefixer())
            .pipe(gulp.dest('css/'));
    });
});

Bootstrap 4もGulpでタスク管理しよう

GruntとGulpはどちらが優れているというわけではありませんが、GulpはGruntに比べていくつか使いやすい点があります。人気もGulpの方が優っている今、Bootstrap 4もGulpでタスク管理するのがお薦めです。

tonkotsuboy_com
ICSのインタラクションデザイナーです。「JavaScriptコードレシピ集」の著者。CSS Nite 2017・2018でベストセッションの1人に選出されました。 アプリ開発やWebページ制作が専門で、フロントエンドの情報を随時発信しています。猫の名前は「うに」です。九州大学芸術工学部音響設計学科出身。
https://ics.media
ics
インタラクションデザイン専門のプロダクション。最先端のウェブテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。最新のウェブ技術を発信するサイト「ICS MEDIA」を運営。
https://ics.media/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away