>WikiSysop в 14:50, 26 січня 2017

2017-01-26T14:50:38Z

Нова сторінка

''Источник: [http://codevoila.com/post/5/customizing-bootstrap-css-style-with-gulp-bower-and-sass Customizing Bootstrap CSS Style With Gulp, Bower And SASS]''

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

<source lang="bash">
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
</source>

Проверить:

<source lang="bash">
node -v
v0.10.33

npm -v
1.4.28

sass -v
Sass 3.4.12 (Selective Steve)

bower -v
1.7.2
</source>

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

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

<source lang="bash">
cd ~/Sites/project.dev/html
npm init
bower init
</source>

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

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

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

<source lang="bash">
mkdir sass css
</source>

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

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

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

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

<source lang="bash">
npm install gulp --save-dev
npm install gulp-sass --save-dev
</source>

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

== Установка Bootstrap ==

Добавьте <code>Bootstrap</code>:

<source lang="bash">
bower install bootstrap-sass --save
</source>

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

bower_components/
bootstrap-sass/
jquery/

а также запись в <code>bower.json</code>.

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

<source lang="bash">
touch sass/style.scss
</source>

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

<source lang="css">
/* main.scss */
@import "bootstrap";
@import "bootstrap/theme";
</source>

== Настройка Gulp ==

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

Создайте файл <code>gulpfile.js</code>:

<source lang="bash">
touch gulpfile.js
</source>

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

<source lang="javascript">
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']);
});
</source>

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

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

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

<source lang="css">
$gray-base: #000 !default;
$gray-darker: lighten($gray-base, 13.5%) !default; // #222
$gray-dark: lighten($gray-base, 20%) !default; // #333
</source>

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

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

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

<source lang="bash">
cp ./bower_components/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss ./css/
</source>

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

<source lang="css">
/* style.scss */
@import "variables";
@import "bootstrap";
@import "bootstrap/theme";
</source>

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

<source lang="css">
/* _variables.scss */
$body-bg: pink;
$link-color: green;
$font-size-base: 18px;
</source>

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

cd ~/Sites/project.dev/html
gulp

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

== См. также ==

* [[Bootstrap]]
* [[Gulp]]
* [[Sass]]
* [[Bower]]

[[Категория:CSS]]
[[Категория:Sass]]
[[Категория:Gulp]]
[[Категория:Bootstrap]]

Установка Bootstrap с Sass и Gulp - Історія редагувань

>WikiSysop в 14:50, 26 січня 2017