7.2. Bootstrap をベースにしたテーマの作成。Gulp を通じた SASS のコンパイル

前のレッスンでは、PhpStorm の組み込みウォッチャーを使って LESS をコンパイルする方法を見ました。このチュートリアルでは、SASS Bootstrap をベースにテーマを作成します。LESS と PhpStorm を通じたコンパイルを扱えない場合は、Gulp と SASS を使ってみることができます。レッスンのこの段階では、LESS を使うか SASS を使うかは私たちにとって重要ではありません。しかし、SASS と Gulp を使うことをお勧めします。というのも、コンパイルがより速く、Gulp のほうが構成が簡単だからです。

Gulp は javascript のジョブマネージャーです。2 つのタスクを追加するために使います。1 つはスタイルを追加するときに sass フォルダーの変更を追跡するもの、2 つ目は SASS を CSS にコンパイルするものです。

それでは、インストールに移りましょう。Drupal をインストールしました。次に、bootstrap テーマをダウンロードして /themes フォルダーに置く必要があります:

https://www.drupal.org/project/bootstrap

bootstrap のサブテーマで SASS を使うには、sass という名前のこのキットを使う必要があります:

この sass フォルダーを bootstrap とは別に /themes フォルダーにコピーし、あなたのテーマの名前に変更します。私は drupalbook にします:

次に、すべてのファイルを THEMENAME からあなたのテーマの名前に変更する必要があります。例えば、THEMENAME.starterkit.yml というファイルがあり、これは drupalbook.info.yml に名前を変更する必要があります。THEMENAME.libraries.yml は drupalbook.libraries.yml に名前を変更する必要があり、以下同様です。config files フォルダー内のファイルの名前変更も忘れないでください。そこにも THEMENAME があります:

ファイルの中にも THEMENAME がある場合があります。例えば、sass/config/schema/THEMENAME.schema.yml ファイルの中に:

何も見落としていないことを確認するために、PhpStorm を通じてサブテーマフォルダー全体で THEMENAME を探します:

検索に THEMENAME を入力し、あるところを私たちのテーマの名前に修正します。

次に、bootstrap 自体をダウンロードして /themes/drupalbook/bootstrap フォルダーに置く必要があります:

https://getbootstrap.com/docs/4.3/getting-started/download/

https://getbootstrap.com/docs/3.3/getting-started/

私たちが関心があるのは bootstrap の SASS バージョンです:

私たちのテーマには bootstrap フォルダー全体が必要です。assets フォルダーへのパスが /themes/drupalbook/bootstrap/assets になるように置きます:

テーマに必要なすべてのファイルをコピーしました。次に、SASS をコンパイルするために Gulp を組み込む必要があります。

まず、Node.js をインストールする必要があります:

https://nodejs.org/en/

Node.js は javascript ランタイムで、SASS を CSS にコンパイルするコードを実行できます。Windows には通常のプログラムとしてインストールされます。最新バージョン、現時点では 7.x.x をダウンロードするほうが良いです:

Node.js をインストールした後、PhpStorm を再起動するか、CMD コンソールが開いている場合は再起動する必要があります。node.js を扱うコンソールは、PhpStorm 内でのように開けます:

あるいは Windows メニューを通じて

コンソールで node -v を入力して、Node.js が正しくインストールされたことを確認します:

次に、drupalbook テーマのフォルダーに移動して Gulp をインストールする必要があります。cd コマンドを通じてフォルダーをたどってコンソールで移動します。cd .. コマンド（cd スペースとドット 2 つ）で親フォルダーに移動できます:

別のドライブに切り替えるには、コマンド D:（D は任意）を入力する必要があります。こうすると、ドライブの目的のパーティション、この場合はドライブ D に切り替わります。

テーマのフォルダーに移動したので、Gulp をインストールします。npm パッケージマネージャーを使ってインストールします。これは Node.js とともにすぐにインストールされます。まず、npm コンポーネントの新しいセットを初期化します:

npm init

これで package.json ファイルが作成されます。このファイルには、npm を通じてインストールするすべてのパッケージが表示されます。コマンドを実行する際は、Enter を押すだけです:

その結果、次の package.json ファイルが生成されます:

{
  "name": "bootstrap-sass",
  "version": "3.3.7",
  "description": "bootstrap-sass is a Sass-powered version of Bootstrap 3, ready to drop right into your Sass powered applications.",
  "main": "assets/javascripts/bootstrap.js",
  "style": "assets/stylesheets/_bootstrap.scss",
  "sass": "assets/stylesheets/_bootstrap.scss",
  "files": [
    "assets",
    "eyeglass-exports.js",
    "CHANGELOG.md",
    "LICENSE",
    "README.md"
  ],
  "repository": {
    "type": "git",
    "url": "git://github.com/twbs/bootstrap-sass"
  },
  "keywords": [
    "bootstrap",
    "sass",
    "css",
    "eyeglass-module"
  ],
  "contributors": [
    "Thomas McDonald",
    "Tristan Harward",
    "Peter Gumeson",
    "Gleb Mazovetskiy"
  ],
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/twbs/bootstrap-sass/issues"
  },
  "devDependencies": {
    "node-sass": "^3.8.0",
    "mincer": "~1.4.0",
    "ejs": "~2.4.2"
  },
  "eyeglass": {
    "exports": "eyeglass-exports.js",
    "needs": "^0.7.1"
  }
}

次に、次のコマンドを実行して Gulp をインストールします:

npm install --save-dev gulp

次のコマンドは gulp-sass パッケージをインストールします:

npm install --save-dev gulp-sass

Gulp 4.x を使っている場合は、この Gulpfile.js のコードが必要になります:

// Gulpfile.js running on stratumui,
// a css framework available on npmjs.com
var gulp    = require('gulp'),
    sass    = require('gulp-sass'),
    concat  = require('gulp-concat'),
    uglify  = require('gulp-uglify');

var paths = {
  styles: {
    src: 'scss/**/*.scss',
    dest: 'css'
  }
};

function styles() {
  return gulp
   .src(paths.styles.src, {
      sourcemaps: true
    })
    .pipe(sass())
.pipe(gulp.dest(paths.styles.dest));
}

function watch() {
  gulp.watch(paths.styles.src, styles);
}

var build = gulp.parallel(styles, watch);

gulp.task(build);
gulp.task('default', build);

gulp、gulp-sass パッケージをインストールしました。次に、gulp 用のタスクを作成する必要があります。そのために、テーマのルートに Gulpfile.js ファイルを作成します:

/themes/drupalbook/Gulpfile.js

また、gulp 4.x と上記の例には、追加のライブラリをインストールする必要があります:

npm install gulp-concat
npm install gulp-uglify

SASS ファイルを css フォルダーにコンパイルするよう指定しましたが、このフォルダーは私たちのテーマにすぐにはないので、作成する必要があります。また、そこに style.css ファイルを追加します:

/themes/drupalbook/css/style.css

このファイルには、コンパイルされたすべての CSS が含まれます。

SASS のコンパイルを始める準備がすべて整いました。そのために、PhpStorm を通じてテーマフォルダーに移動し、Gulpfile.js を選択して、コンテキストメニューで Show Gulp Tasks を選択します:

default タスクを選択すると、このタスクのウィンドウがすぐに開きます:

これで、テーマで SASS を変更するたびに、gulp が自動的に SASS を再コンパイルします。

コンパイルの結果、CSS が style.css ファイルに現れ、サイトの背景色が黄色に変わります:

最初は Gulp を使ったコンパイルの設定に時間がかかるように思えるかもしれませんが、すでに Node.js がインストールされていれば、Gulpfile.js ファイルを追加して gulp、gulp-sass パッケージをインストールするだけで済みます。インストールと設定で何か困ったことがあれば、コメントに書いてください。