Установка Bootstrap с Sass и Gulp

Источник: Customizing Bootstrap CSS Style With Gulp, Bower And SASS

Установка Node.js, NPM, Bower, Sass

sudo apt-add-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install python-software-properties nodejs sass
sudo npm install -g gulp
sudo npm install -g bower

Проверить:

node -v 
v0.10.33

npm -v 
1.4.28

sass -v
Sass 3.4.12 (Selective Steve)

bower -v
1.7.2

Инициализация проекта

Перейдите в папку проекта и выполните команды:

cd ~/Sites/project.dev/html
npm init
bower init

Команда npm init задаст несколько вопросов (можно на все отвечать нажатием Enter) и создаст файл package.json, в котором будут регистрироваться пакеты node.js. Файлы пакетов будут записываться в папку node_modules в папке проекта.

Аналогично, команда bower init создаст файл bower.json. Файлы пакетов bower будут устанавливаться в папку bower_components.

Также создайте папки:

mkdir sass css

Папка sass будет содержать файлы .sass, непосредственно c которыми будет вестись работа при редактировании стилей сайта, а в папку css будут помещаться автоматически сгенерированные .css файлы, которые трогать нельзя.

Итого файловая структура проекта должна быть такой:

project.dev/html/
  - css/
  - sass/
  - bower.json
  - package.json

Добавьте в проект gulp и gulp-sass:

npm install gulp --save-dev
npm install gulp-sass --save-dev

Эти пакеты будут установлены в папку node_modules и будут добавлены записи о них в файл package.json.

Установка Bootstrap

Добавьте Bootstrap:

bower install bootstrap-sass --save

Появятся папки:

bower_components/
  bootstrap-sass/
  jquery/

а также запись в bower.json.

Создайте основной файл для работы с CSS:

touch sass/style.scss

И добавьте в него строки с импортом Bootstrap в него:

/* main.scss */
@import "bootstrap";
@import "bootstrap/theme";

Настройка Gulp

Теперь нужно настроить gulp, чтобы он автоматически компилировал Sass файлы в папке sass/ в CSS файлы в папке css/. Это делается с помощью задач (task), определенных в файле gulpfile.js.

Создайте файл gulpfile.js:

touch gulpfile.js

Вставьте в gulpfile.js следующий код:

var
  gulp = require('gulp'),
  sass = require('gulp-sass');

// Source and destination folder
var
  source = 'sass/',
  dest = 'css/';

// Bootstrap SCSS source
var bootstrapSass = {
  in: 'bower_components/bootstrap-sass/'
};

// Fonts
var fonts = {
  in: [source + 'fonts/*.*', bootstrapSass.in + 'assets/fonts/**/*'],
  out: dest + 'fonts/'
};

// CSS source file: .scss files
var css = {
  in: source + 'style.scss',
  out: dest,
  watch: source + '**/*',
  sassOpts: {
    outputStyle: 'nested',
    precison: 3,
    errLogToConsole: true,
    includePaths: [bootstrapSass.in + 'assets/stylesheets']
  }
};

// Copy Bootstrap required fonts to destination
gulp.task('fonts', function () {
  return gulp
    .src(fonts.in)
    .pipe(gulp.dest(fonts.out));
});

// Compile SCSS
gulp.task('sass', ['fonts'], function () {
  return gulp.src(css.in)
    .pipe(sass(css.sassOpts))
    .pipe(gulp.dest(css.out));
});

// Default task
gulp.task('default', ['sass'], function () {
   gulp.watch(css.watch, ['sass']);
});

Переопределение стилей Bootstrap

Стили компонентов Bootstrap определяются в переменных в файле bower_components/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss.

Взгляните на код в этом файле:

$gray-base:              #000 !default;
$gray-darker:            lighten($gray-base, 13.5%) !default; // #222
$gray-dark:              lighten($gray-base, 20%) !default;   // #333

Обратите внимание: в конце каждой строки стоит директива !default. Эта директива означает, что текущая переменная будет определена и получит указанное значение только в случае, если она не была определена раньше.

Следовательно, если вы определите значения переменных до импорта Bootstrap, то вы переопределите их.

Скопируйте файл _variables.scss в папку css:

cp ./bower_components/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss ./css/

Затем в файле style.scss импортируйте копию _variables.scss выше, чем импортируете Bootstrap:

/* style.scss */
@import "variables";
@import "bootstrap";
@import "bootstrap/theme";

Теперь переопределите то, что вам нужно, в css/_variables.scss:

/* _variables.scss */
$body-bg: pink;
$link-color: green;
$font-size-base: 18px;

Компиляция scss в css

cd ~/Sites/project.dev/html
gulp

Будет сгенерирован файл css/style.css.

См. также

• Bootstrap
• Gulp
• Sass
• Bower