bootstrap4,gulpでvariablesのカスタマイズ

4039 ワード
gulp bootstrap4 browser-sync gulp テキストリンク

初投稿です。
macでの開発前提です。

mkdir tmp
cd tmp

npm init
sudo npm install --global gulp
npm install --save-dev gulp gulp-sass gulp-autoprefixer
npm install [email protected]

mkdir scss
mkdir css

gulpコマンドを有効にするために、グローバルでインストール。
グローバルにインストールしていないと、

-bash: gulp: command not found

が出ました。

tmp/node_module/scss/bootstrap.scss を tmp/scss にコピペして、ファイル名を bootstrap-custom.scss に。

vi scss/bootstrap-custom.scss

下のような感じで編集。

---（略）-------
@import "./variables-custom"; // variables より上に追記
@import "variables"; // 元々記述してあったやつ
---（略）-------

gulpfile.jpを作成してコードを書く。

vi gulpfile.js

絶対つまずかないGulp入門。インストールからSassのコンパイルまでを参考に記述。

const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');

gulp.task('default', function () {
  gulp.src('public/scss/bootstrap-custom.scss') // target sass
    .pipe(sass({includePaths:['node_modules/bootstrap/scss']})) // sassのコンパイル
    .pipe(autoprefixer()) // autoprefixerのコンパイル
    .pipe(gulp.dest('public/css')); //　保存先のパス
});

こんな感じ。
includePaths は gulp の機能ではなく、node-sassの機能。
src で指定する scss ファイルが @import する時の対象ディレクティブを指定できます。
コンパイル対象のファイルからのパスではなく、 gulpfile.js のパスから記述する（多分）。

gulp.src には tmp/scss/bootstrap-custom.scss を指定。

cd scss
vi _variables-custom.scss

_variables-custom.scss で上書きカスタマイズしたい variables を記述。

cd ../
gulp

コンパイルされたcssを読み込む。

リロードの自動化(livereload)

毎回 gulp コマンドを打つのも大変なので、自動化します。

npm install --save-dev browser-sync

gulpでブラウザのリロードを自動化してみたを参考に gulpfile.js を編集します。

適当なhtmlを作っておきます。

mkdir html
vi html/index.html

baseDir で指定したディレクトリより下のパスしか読めません。
baseDir に /html を指定すると、html内で呼び出す ../css が読めないので ＂cannot get＂が出る。

tmp を指定して index には /html/index.html を指定するなど。

gulp.taskで scss を監視するときは、 

gulp.watch('path/to/scss/*.scss', ['sass', 'bs-reload']);

な感じで。

gulp コマンド後、監視しているファイルを更新すると、自動的にブラウザをリロードしてくれます。

参考サイト

bootstrap4 DOWNLOAD
Bootstrap 4のCSSコンパイルをGulpで管理する方法
絶対つまずかないGulp入門。インストールからSassのコンパイルまで

オラ工程第28題:Number spiral diagonals
スタック練習(データ構造第5週練習問題)