Bootstrap for Sass, npm, bower, gulp で快適Web開発環境構築

（3年前） 2016/1/10 Web

web-bootstrap

「Bootstrap」を利用したサイトを製作するために、「Bootstrap for Sass」と「Node.js（npm）」、「bower」、「gulp」を用いて開発環境を構築するためのテンプレートを作成していきたいと思います。

単純に「Sass」の導入だけでも十分に便利になることは間違いありませんが、もう少し踏み込んで「gulp」の導入まで進めておくと、ベンダープレフィックスの付与やファイルの圧縮・ミニファイなどまで自動で完了させることができるので、この機会にまとめて導入を考えてみてはよいのではないでしょうか。

今回は、「npm」や「bower」、そして「gulp」を用いることで「Bootstrap for Sass」が始められるような環境を構築、また「gulp」の「タスク」などもあわせて公開し、細かいところはともかくとして「とりあえずサイトを便利に製作できる」という地点にまでご案内し、その便利さを実感できれば良いと考えています。

コマンドプロンプトを多用することにはなりますが、毛嫌いせずに覚えておくときっと便利になるはずです。

「Bootstrap for Sass」＋「gulp」テンプレートファイル
bootstrap3-template.zip [MD5: 38397f74c4ac792469b0916e1ea5ce0e]

スポンサーリンク

はじめに

Webサイトの構築にCSSフレームワーク「Bootstrap」を利用している方は多いことでしょう。簡単に構築できる反面で、標準のまま利用するといかにも「Bootstrap」というようなデザインのサイトが出来上がり、慣れてくると少しずつカスタマイズをしていきたくなります。

カスタマイズのためにはHTMLに新たなクラスやIDを与えたりしてプロパティを上書きしていく方法もありますが、「Bootstrap」では色やフォント、サイズに関する設定など細部にわたるカスタマイズを行った上で、その設定を反映したCSSをダウンロードできる機能が備えられています。

Customize and download：Bootstrap

とはいえ、微調整が必要な部分のために都度設定項目を入力して新たにダウンロードするのは現実的ではありませんし、色やサイズなどといった既に定義されている基本的なプロパティを上書きするためだけのCSSを記述するのもなんだか癪に障ります。

そこで、「Bootstrap」が提供する「Bootstrap for Sass」を利用することで、サイトの仕様に合わせた「Bootstrap」を構築することが可能です。

Sass（Syntactically Awesome Stylesheets）では、変数が使用出来たりセレクタを入れ子に出来たりすることでCSSの記述がより簡潔に、効率良く進めることができるもので、今やWeb製作になくてはならないもののひとつといっても過言ではないでしょう。

ところが、「Bootstrap for Sass」を使用するためには、「Ruby」や「Compass」、「Bower」、「npm」など新たなツールや覚えなければいけないことがたくさんあることに気づかされます。

それぞれについては様々なサイトで解説されていますが、細かなことはさておきまずは「Bootstrap for Sass」を使いたいという人のために、手順を記していきたいと思います。

また、あわせて「gulp」を導入することでベンダープレフィックスの付与、ファイルの圧縮・ミニファイといった作業を一任させることができ、手間を大きく減らすことができるようになるでしょう。

必要なもの

必要となるプログラムなどについて、簡易な説明をしておきます。

Node.js

「サーバサイドのJavaScript環境」です。多くのライブラリが開発・公開されており、npm（Node Package Manager）を使ってライブラリのインストールなどを管理することができ、「npm」はインストール対象のライブラリに必要な別のライブラリもまとめてインストールしてくれる優れものです。

「Node.js」は公式サイト（http://nodejs.org/）に、WindowsとMacにはインストーラが用意され、Linux用にはソースコードが提供されています。

Windowsは「C:\Program Files\nodejs\node.exe」、Macは「/usr/local/bin/node」に実行ファイルがインストールされることになります。

今回は「npm」を利用するために、「Node.js」をインストールします。

git for windows

「git」は、プログラムのソースコードなどの変更履歴を記録・追跡するための分散型バージョン管理システムで、「GitHub」など利用されたことのある人もいるでしょう。

今回は「bower」を利用するために、「git」をインストールします。

bower

「bower」はTwitterがつくった、JavaScriptやCSS、HTMLなどについて依存関係も含めて管理してくれる、フロントエンド用パッケージ管理ツールとなります。

有名なJavaScriptのライブラリ「jQuery」なども、「bower」で提供されています。

「npm」がサーバサイドのパッケージ管理ツールとして開発環境系の管理であるならば、「bower」はクライアントサイドのパッケージ管理ツールとしてブラウザで動くライブラリを管理するものであるとも言えますが、たとえば「jQuery」などのように「npm」、「bower」どちらにも提供されているものも存在しています。

今回使用したい「Bootstrap for Sass」も「npm」、「bower」どちらでも提供されており、「bower」がなくても目的は達成するのですが、今後の汎用性も考えて「bower」を利用することにします。

gulp

「gulp」は「タスクランナー」に分類されるツールで、たとえばSassのコンパイル、CSSのベンダープレフィックスを自動的に付与する、JavaScriptやCSS、HTMLの圧縮・ミニファイなど各種の「タスク」を自動的に行えるようになるほか、ソースファイルを監視して変更があれば自動的にブラウザをリロードするなどWeb製作を効率化させるために必須ともいえるものです。

「gulp」がなくてもWeb製作を進めることは可能ですが、決まりきった作業は自動化していくことが効率化を進める一番の要因ですので、「gulp」をぜひ導入してみましょう。

Node.js のインストール

インストールプログラムのダウンロード

nodejs-01

まず、「Node.js」のサイト（https://nodejs.org/en/）へ行くと、自身の環境に合わせた最適なバージョンがダウンロードできるようになっているので「LTS」（Long-term Support）を選択し、ダウンロードします。

※「LTS」と「Stable」の違い
Node.js Long-term Support Working Group（https://github.com/nodejs/LTS/）の通りですが、個人のみで使用する場合はどちらを選んでも良いでしょう。企業などチームで開発する場合は、「LTS」を選んでおくのが無難です。

インストールプログラムの実行

nodejs-02

ダウンロードした「node-v4.2.3-x64.msi」（ファイル名はバージョン、環境により異なります）を実行し、「Next」をクリックする。

nodejs-03

ライセンスへの同意が求められるので、「I accept the terms in License Agreement」にチェックを入れ、「Next」をクリックする。

nodejs-04

インストールする場所は必要があれば変更し、「Next」をクリックする。

nodejs-05

インストールするものは変更せず、「Next」をクリックする。

nodejs-06

「Install」をクリックする。

nodejs-07

「Finish」をクリックする。

nodejs-08

コマンドプロンプトを起動し、「node -v」と「npm -v」とそれぞれ入力し、バージョン番号が表示されていれば正常に完了です。

node -v
npm -v

git for windows のインストール

インストールプログラムのダウンロード

git-01

まず、「git」のサイト（http://git-scm.com/）へ行くと、自身の環境に合わせた最適なバージョンがダウンロードできるようになっているので「Downloads for Windows」をクリックし、ダウンロードします。

インストールプログラムの実行

git-02

ダウンロードした「Git-2.6.4-64-bit.exe」（ファイル名はバージョン、環境により異なります）を実行し、「Next」をクリックする。

git-03

ライセンスを読み、「Next」をクリックする。

git-04

インストールする場所を必要があれば変更し、「Next」をクリックする。

git-05

インストールするものは変更せず、「Next」をクリックする。

git-06

スタートメニューへの登録も必要あれば変更し、「Next」をクリックする。

git-07

WindowsのコマンドプロンプトからGitのコマンドを使えるようにするため、「Use Git from the Windows Command Prompt」を選択し、「Next」をクリックする。

git-08

改行コードの設定は「Checkout Windows-style, commit Unix-style line endings」を選択し、「Next」をクリックする。

git-09

ターミナルはコマンドプロンプトから利用するので「Use Windows default console window」を選択し、「Next」をクリックする。

git-10

そのまま「Next」をクリックする。

git-11

「Finish」をクリックする。

git-12

コマンドプロンプトを起動し、「git –version」と入力し、バージョン番号が表示されていれば正常に完了です。

git --version

bower のインストール

「bower」のインストールは「npm」から行うことになります。

bower-01

コマンドプロンプトを起動し、「npm install -g bower」と入力すると、「bower」がインストールされます。

bower-02

標準では「C:\Users\ユーザ名\AppData\Roaming\npm」にインストールされる。

bower-03

一度コマンドプロンプトを閉じ、新たに開いたコマンドプロンプトから「bower -v」と入力し、バージョン番号が表示されていれば正常に完了です。

bower -v

Web開発のための準備

「npm」、「git」、「bower」のインストールにより、Web開発環境構築の下準備が整いました。

ここからはWeb用のHTMLやCSSなどソースファイルや、「gulp」など各種ライブラリを保存するフォルダを作成し、そのフォルダをひとつのプロジェクトフォルダとして使用していくことになります。

作業用フォルダの作成

まず、Web製作用のファイルをまとめて管理する「プロジェクト用フォルダ」を適当な場所に作成しましょう。今回は「D:\」ドライブ直下に「labo」というフォルダを作成しました。

なお、フォルダのパスやフォルダ名そのものに日本語が含まれていると、以下の作業がエラーとなる場合があります。日本語フォルダを作成しない、Windowsのユーザ名が日本語の場合のマイドキュメント以下には作成しないようにしてください。
× C:\Users\山田太郎\Documents\Web
○ C:\Users\Yamada\Documents\Web

テンプレートファイルを展開

ここまでの作業でインストールした「npm」や「bower」を用いて「Bootstrap for Sass」の各種ファイルを取得し、すぐにでも使えるようにしたテンプレートを公開します。

何から始めてよいのかわからないという方、とりあえず「Bootstrap for Sass」を使ってみたいという人は利用してみてください。

後述しますが、「gulp」のタスクも含まれており、難しいことを考えずにJavaScriptやCSSの圧縮・ミニファイが行えるようにしています。

「Bootstrap for Sass」＋「gulp」テンプレートファイル
bootstrap3-template.zip [MD5: 38397f74c4ac792469b0916e1ea5ce0e]

ファイルを保存後に圧縮ファイルを展開し、「gulp」「source」「bower.json」「gulpfile.js」「package.json」を先ほど作成した作業用フォルダ「D:\labo」に移動してください。

D:\labo
    --[gulp]
    --[source]
    --bower.json
    --gulpfile.js
    --package.json

「npm」でライブラリのインストール

init-01

「D:\labo」を起点としてコマンドプロンプトを実行し、「npm install」と入力して実行します。複数のライブラリをダウンロードすることになるので少し時間を要します。

npm install

途中、「WARN」など警告やエラーが出る場合がありますが、ひとまず問題がなく進んでいきます。

init-02

「D:\labo」に「node_modules」というフォルダが作成され、「gulp」など様々なライブラリがインストールされています。

「bower」でライブラリのインストール

init-03

次に、先ほど同様に「D:\labo」を起点として、コマンドプロンプトから「bower install」と入力して実行します。

bower install

「bower_components」というフォルダが作成され、「jquery」「bootstrap-sass」がインストールされています。

ここまでの作業でひととおりの準備が整いました。

「gulp」による処理実行

gulp-01

「D:\labo」を起点としてコマンドプロンプトを実行し、「npm start help」と入力し実行すると、よく使う「gulp」のタスクが確認できるようにしています。
「gulp」のタスクはすべて「npm start ○○○」という形で利用するようになっています。

gulp-02

「sample」というタスクを実行すると、「bootstrap」のテンプレートが表示できるようにしています。まずは、「npm start sample」を実行してみましょう。

gulp-03

すると、「D:\labo」に「public」というフォルダが作成されているので、フォルダ内にある「index.html」をブラウザで開いてみましょう。「Bootstrap Theme example」が表示されていれば成功です。

行われているタスクの処理

「gulp」の「sample」というタスクで何が行われたかを見てみましょう。

「sample」タスクは「gulp」ディレクトリの中にある「task」フォルダの「sample.js」に記載されています。
なお、「task」ディレクトリを見るとわかるように、「gulp」から呼び出せるタスクをそのままファイル名としておくと、今後の管理も便利になるでしょう。

// @sample.js 抜粋
gulp.task(taskName, function() {
  runSequence(
    ['bootstrap', 'clean'],
    'build'
  );
});

「gulp」のタスクは「gulp.task」以下に記述するようになっています。

「sample」タスクは、「runSequence」というタスクを指定した順番に実行できるモジュールを使い、まず「bootstrap」というタスクと「clean」を実行した後に、「build」というタスクを実行するという形になっています。

「bootstrap」というタスクは「bootstrap.js」に、「clean」というタスクは「clean.js」に、そして「build」というタスクについては「gulpfile.js」にタスクの内容が記載されています。

// @bootstrap.js 抜粋
gulp.task(taskName, function() {
  return merge(
    gulp.src(config.style.src)
    .pipe($.rename({
    suffix: '-sample'
    }))
    .pipe(gulp.dest(config.style.dst)),
  gulp.src(config.font.src)
    .pipe(gulp.dest(config.font.dst)));
});

「bootstrap」タスクは、「bower」で取得した「bootstrap」の関連ファイルから「_variables.scss」を取得し、「_variables-sample.scss」と名前を変更したうえで「source」ディレクトリ内へとコピーしています。

// @clean.js 抜粋
gulp.task(taskName, del.bind(null, [
  config.projectPath.public.root,
  config.projectPath.styleguide.root
]));

次に「clean」タスクは、「public」「styleguide」ディレクトリと、「build」タスクによって作成されるディレクトリを削除しています。これは、一度出力先を綺麗にしたうえで新しくファイルを出力する処理ということになります。

// @gulpfile.js 抜粋
gulp.task('build', ['sass', 'webpack', 'www']);

そして「build」は作成したソースファイルを公開するファイルの形式へと変換するタスクですが、よく使用するものなので個別のファイルにせず「gulpfile.js」という大元に記載しています。

「build」タスクでは「sass」「webpack」「www」というタスクを処理していることがわかります。

// @sass.js 抜粋
gulp.task(taskName, function() {
  var projectMode = require('../config').projectMode;

  return gulp.src(config.src)
    .pipe($.plumber())

    .pipe($.if(projectMode.styleGuide, $.frontnote({
    'css': styleguide.css,
    'out': styleguide.dest,
  })))

  .pipe($.if(projectMode.styleSourcemap, $.sourcemaps.init()))
    .pipe($.sass(config.sassOption))
    .pipe($.pleeease({
    'autoprefixer': { 'browsers': config.browsers },
      'filters': true,
      'rem': true,
      'pseudoElements': true,
      'opacity': true,
      'import': { 'path': config.sourceDir },
      'minifier': projectMode.styleMinify,
      'mqpacker': true,
    }))
    .pipe($.rename(config.outputFile))
  .pipe($.if(projectMode.styleSourcemap, $.sourcemaps.write('.')))

  .pipe(gulp.dest(config.dest))

  .pipe($.if(projectMode.styleGuide, gulp.dest(styleguide.dest)))
  .pipe(browserSync.stream());
});

「sass」タスクは、ソースマップの出力、スタイルガイドの出力に加え、ベンダープレフィックスの付与やファイルの圧縮・ミニファイの処理が行えるようになっています。

しかし、開発中はCSSを圧縮・ミニファイされてしまうと確認作業が手間取る、またリリース（公開用ファイル生成）時にはソースマップが不要となるなど、状況により要・不要のものが異なります。

それに合わせ、通常時は圧縮を行わずソースマップを出力し、「release」というタスクによって呼び出される際にのみ圧縮処理を行い、ソースマップを出力しないと切り替えています。

// @webpack.js 抜粋
gulp.task(taskName, function () {
  if (require('../config').projectMode.scriptMinify) {
    config.plugins.push(config.pluginsUglify);
  }

  return gulp.src(config.entry)
    .pipe($.plumber())
    .pipe(webpack(config))
    .pipe(gulp.dest(config.dest))
    .pipe(browserSync.stream());
});

「webpack」タスクは、「Bootstrap」のJavaScriptファイルや、自身で作成したJavaScriptファイルをひとつに結合しています。「sass」タスク同様にファイルの圧縮・ミニファイの処理は切り替えられるようになっています。

// @webpack.js 抜粋
gulp.task(taskName, function() {
  return gulp.src(config.src)
  .pipe(gulp.dest(config.dest))
  .pipe(browserSync.stream());
});

「www」タスクは、「source」ディレクトリの内容をそのまま「public」へとコピーします。

このような処理の流れで「sample」タスクは動いていますが、「sass」など他のプロジェクトでも流用できるものがほとんどで、ディレクトリ構成や名前などは都度対応できるように「config.js」というファイルにまとめて記載してあります。

「gulp」用設定ファイル

「gulp」フォルダにある「config.js」には、プロジェクトのフォルダ構成など各種設定が記載されているおり、フォルダ名などは必要に応じて変更してください。

// @config.js 抜粋
var product = false;

「product」を「true」にするとCSSとJavaScriptの圧縮・ミニファイが有効になり、CSSとJavaScriptのソースマップを「出力しない」設定となります。

// @config.js 抜粋
var projectName = 'bootstrap3';
var sourceDir = './source/';
var publicDir = './public/';

「projectName」は作成するプロジェクトの名前です。最終的に出力されるCSSやJavaScriptファイルの基礎名として使用しています。

「sourceDir」はHTMLやCSS、JavaScriptファイルなど、実際に編集していくソースファイルを置くフォルダです。

「publicDir」は公開用となるHTMLやCSS、JavaScriptファイルが「build」タスクにより出力されるフォルダです。

複数のブラウザを自動更新

今回の「gulp」タスクには、「ソースファイルを編集するとブラウザを自動更新する」という非常に便利な機能を含めています。

gulp-04

先ほどまでは「gulp」のタスクを使うために、「npm start ○○○」と指定していましたが、今度は「npm start」とだけ入力して実行してみましょう。

gulp-05

すると、「デフォルトタスク」が動作しローカルのWebサーバが起動するようになっており、ファイルを更新すると自動でブラウザがリロードされ、毎回更新ボタンや「F5」を押す手間が省けるようになります。

npm start

「npm start」と入力し実行すると自動的にブラウザが起動し、作成したサイトが表示されているかと思います。もしブラウザが起動していない場合は、画面に表示されているExternal 「http://192.168.56.1:3000」をコピーし、ブラウザで開いてみてください（※URLは環境により異なります、画面のURLを確認してください。）

この状態のまま、「source」ディレクトリにある「www」ディレクトリの「index.html」を変更してみましょう。

たとえば56行目にある「<h1>Theme example</h1>」という部分を、「<h1>AAA Theme example</h1>」と変更し、保存してみてください。

すると自動的にブラウザが更新され、画面上の表記も「AAA Theme example」と変わったことが確認できるでしょう。

もし、更新されていない場合は一度手動でブラウザを更新し、改めて「index.html」を変更し、保存してみると次回以降は自動で更新することが確認できるでしょう。

他にも、「source」の「scss」ディレクトリにある「_variables-sample.scss」を変更してみたり、「script」にある「bootstrap3.js」を変更してみると、その変更がブラウザにもすぐ反映されていることがわかるかと思います。

同時に複数のブラウザの挙動を確認できる

browsersync-demo

ブラウザの自動更新は「browsersync」というモジュールを利用しているのですが、「browsersync」では同時に複数のブラウザをリロードし、ボタンのクリックやスクロールを同期することが可能です。

上記のアニメーションGIFでは、左側に「Google Chrome」、右側に「Microsoft Edge」を開いています。

このように最初に開いたブラウザ以外にブラウザをお持ちであれば、External URL「http://192.168.56.1:3000」（例）を開いてみると、その動きが確認できることでしょう。また、スマートフォンが同じネットワーク内に接続されているのであればスマートフォンからでも同様の動作が可能です。

これにより異なるブラウザ、端末のチェックなども手早く行えることでしょう。

ローカルWebサーバを停止するには「Ctrl + C」で「バッチ ジョブを終了しますか（Y/N）？」と尋ねられるので「Y」と入力し、終了することができます。

再度、ローカルWebサーバを起動するには最初と同じように「npm start」を実行してください。

まとめ

今回は「Bootstrap for Sass」を利用するために、「Node.js（npm）」「bower」「gulp」など必要なプログラムのインストールから、「gulp」のタスクを実行しベンダープレフィックスの付与やファイルの圧縮・ミニファイまで行い、閲覧できるHTMLサイトのテンプレートを作成しました。

「SASS」や「gulp」が便利である、ということはよく耳にしても、いざ自分が導入してみようとなると決してハードルが低いとは言えません。

もちろん、様々なことを理解してから使用するのが一番ではありますが、まずは動く状態のものを利用し、その上で必要な部分を補足するような形で学習していくほうがわかり易いこともあるのではないでしょうか。

公開したテンプレートをもとに、必要な部分を補足学習し、Webサイトの製作に活かしていければなによりです。

「Bootstrap for Sass」＋「gulp」テンプレートファイル
bootstrap3-template.zip [MD5: 38397f74c4ac792469b0916e1ea5ce0e]

 

スポンサーリンク

コメント

  1. ガルガルぷー より:
    2016年2月4日 9:16 PM

    良記事！参考にさせていただきまし！！

    返信

コメントをどうぞ

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