こんにちは、エンジニアのturryです。
みなさんがこれを機に様々なジャンルの記事を書いている中、私だけいつもの連載物を載せるのはどうか、と悩みましたが、今は「まあ、いいか」という心境です。
さて、前回は実際にgulpfile.babel.jsにコードを書いて、ビルドしてみました。
今回は、bootstrapを組み込んでみます。

1. bowerによるbootstrap取得

bootstrapは、npmモジュールとして配布されておりません。
そこで、フロントエンド用パッケージ管理ツールであるbowerを使用して、bootstrapを取得します。

1-1. bowerのインストール

以下のコマンドでbowerをグローバルインストールします。

$ npm install -g bower

1-2. bower.jsonの作成

次に、bowerモジュールを管理するbower.jsonを作成します。
以下のコマンドを実行すると、対話形式で入力を求められますので、必要あれば入力してください。

$ bower init
? name (javascript-exsample)
? description ()
? main file (index.js)
? what types of modules does this package expose? (Press to select)
❯◯ amd
 ◯ es6
 ◯ globals
 ◯ node
 ◯ yui
? keywords
? authors (turry)
? license (ISC)
? homepage
? set currently installed components as dependencies? (Y/n)
? would you like to mark this package as private which prevents it from being accidentally published to the registry? (y/N)
cidentally published to the registry? (y/N)
{
  name: 'javascript-exsample',
  description: '',
  main: 'index.js',
  authors: [
    'turry'
  ],
  license: 'ISC',
  moduleType: [],
  homepage: '',
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ]
}
? Looks good? (Y/n)

実行後、カレントディレクトリにbower.jsonが存在するか確認してください。

1-3. bootstrapの取得

最後に、sass版のbootstrapを取得します。

$ bower install --save-dev bootstrap-sass

上記コマンド実行後、ソースはbower_componentsフォルダに格納されます。
なお、bowerはnpmと同様、––save-devオプションを追加することでbower.jsonにモジュール情報が自動的に追加され、次回以降はbower installで必要なbowerパッケージは全てインストールされます。

2. gulpでビルドしてみる

bootstrapを取得しましたので、今度は実際にビルドしてみます。
まずは、sassをビルドするためのnpmモジュールをインストールします。

$ npm install --save-dev gulp-ruby-sass

インストール後、ベースとなるscssファイルを作成します。

$ mkdir src/styles
$ touch src/styles/app.scss

scssファイルでは以下の通りに記載して保存します。

$icon-font-path: "/static/fonts/";
@import "bootstrap-sprockets";
@import "bootstrap";

これで準備が整いました、それではgulpfile.babel.jsにコードを書いてみます。

use strict';
import gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';
const $ = gulpLoadPlugins();
const common = {
  styles: {
    src: 'src/styles/app.scss',
    dist: 'dist/static/styles',
  },
  fonts: {
    src: 'bower_components/bootstrap-sass/assets/fonts/bootstrap/*.{eot,svg,ttf,woff,woff2}',
    dist: 'dist/static/fonts'
  }
};
gulp.task('styles', () => {
  let sassOptions = {
    style: 'expanded',
    precision: 5,
    loadPath: ['bower_components/bootstrap-sass/assets/stylesheets’]
  };
  return $.rubySass(common.styles.src, sassOptions)
  .pipe(gulp.dest(common.styles.dist));
});
gulp.task('fonts', () => {
  gulp.src(common.fonts.src)
  .pipe(gulp.dest(common.fonts.dist));
});
gulp.task('default', ['styles', 'fonts']);

今回は、gulpタスクに [‘styles’] [‘fonts’] を追加しました。
[‘styles’] では、上記で作成しましたscssファイルをgulp-ruby-sassでビルドし、指定したフォルダに格納する流れとなります。
gulp-ruby-sassでは第二引数にオプションを指定することで、以下の通り細かい設定が可能です。
gulp-ruby-sass
https://github.com/sindresorhus/gulp-ruby-sass
[‘fonts’] では、bootstrapで使用するフォントを指定したフォルダに格納する流れとなります。
取得先はbower_componentsのfontsフォルダ内からで、格納先はscssファイルに記載したicon-font-pathになります。
最後に、gulpのタスクが増えてきた際にいちいちタスクを一つずつ実行するのは手間がかかるので、gulpタスク [‘default’] にgulpタスクをまとめました。
こうすることで、以下のコマンドを実行した際、[‘styles’] [‘fonts’] が同時に実行されます。
それでは、実行してみます。

$ gulp

これで、distフォルダ内のstatic/stylesフォルダにはbootstrapのコードが記載されたcssファイルが、static/fontsフォルダにはフォントが格納されます。

以上で完了です。
次の更新では、Reactを導入してみます。