Gulpを使ってBootstrapをカスタムビルドする

npmのエコシステムのみを使い、Bootstrapの必要な機能のみ(例えばグリッドシステムだけ、など)を抽出しカスタムビルドする手順です。なお、公式サイトにはGUIからカスタムしたファイルをダウンロードできる機能があります。
http://getbootstrap.com/customize/
UNIX環境を想定しています。

プロジェクトのセットアップ

your-projectはあなたのプロジェクト名に置き換えてください。

mkdir your-project
cd your-project
npm init

依存ライブラリのインストール

npm install --save bootstrap
npm install --save-dev gulp gulp-less

Bootstrapのカスタマイズ用のファイルを作成

mkdir src
cp ./node_modules/bootstrap/less/bootstrap.less ./src/bootstrap-custom.less

必要な機能以外をコメントアウトしたり削除し、インポートしないよう設定します。ここでは、スタイルリセット、タイポグラフィ、コーディングのスタイル、グリッドシステムのみをインポートしています。

vi ./src/bootstrap-custom.less
/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

// Core variables and mixins
@import "variables.less";
@import "mixins.less";

// Reset and dependencies
@import "normalize.less";
// @import "print.less";
// @import "glyphicons.less";

// Core CSS
@import "scaffolding.less";
@import "type.less";
@import "code.less";
@import "grid.less";
// @import "tables.less";
// @import "forms.less";
// @import "buttons.less";

// Components
// @import "component-animations.less";
// @import "dropdowns.less";
// @import "button-groups.less";
// @import "input-groups.less";
// @import "navs.less";
// @import "navbar.less";
// @import "breadcrumbs.less";
// @import "pagination.less";
// @import "pager.less";
// @import "labels.less";
// @import "badges.less";
// @import "jumbotron.less";
// @import "thumbnails.less";
// @import "alerts.less";
// @import "progress-bars.less";
// @import "media.less";
// @import "list-group.less";
// @import "panels.less";
// @import "responsive-embed.less";
// @import "wells.less";
// @import "close.less";

// Components w/ JavaScript
// @import "modals.less";
// @import "tooltip.less";
// @import "popovers.less";
// @import "carousel.less";

// Utility classes
@import "utilities.less";
@import "responsive-utilities.less";

ビルド環境のセットアップ

node_modulesにインストールされているlessファイルをインポートできるよう設定します。

vi gulpfile.js
var gulp = require('gulp');
var less = require('gulp-less');
gulp.task('css_compile', function() {
  gulp.src('./src/bootstrap-custom.less')
    .pipe(less({ paths: ['./node_modules/bootstrap/less/'] }))
    .pipe(gulp.dest('./dest/bootstrap-custom.css'));
});

package.jsonにビルドスクリプトを記載します。

vi paclage.json
{
...
  "scripts": {
    ...
    "build": "gulp css_compile",
    ...
  }
...
}

ビルド

npm run build
ls ./dest/bootstrap-custom.css

bootstrap-custom.css

これでカスタムビルドされた./dest/bootstrap-custom.cssが得られました。

補足

プロジェクトの最終構成

tree -L 3

your-project
├── dest
│   └── bootstrap-custom.css
├── src
│   └── bootstrap-custom.less
├── gulpfile.js
└── package.json

# node_modulesフォルダは除いています。

圧縮率

ファイルサイズは19.4%になりました。

du ./node_modules/bootstrap/dist/css/bootstrap.css ./dest/bootstrap-custom.css

288	./node_modules/bootstrap/dist/css/bootstrap.css
56	./dest/bootstrap-custom.css

リファレンス

LESS/Sass/CSSのごった煮コンパイル (gulp版)
http://qiita.com/cognitom/items/c6b5e95c41dd53fe3dcf

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です