Установка Bootstrap с Sass и Gulp
Источник: Customizing Bootstrap CSS Style With Gulp, Bower And 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:
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, чтобы он автоматически компилировал 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 определяются в переменных в файле 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;
cd ~/Sites/project.dev/html gulp
Будет сгенерирован файл css/style.css.