Настраиваем Twitter Bootstrap с SASS, используя bower и grunt

Admin 05.10.202005.10.2020 Комментариев нет Bootstrap, bower, CSS, grunt, SASS

Допустим при создании нового проекта мне понадобится:

Twitter Bootstrap с SASS
Компиляция SASS в CSS (для этого будем использовать Grunt)

CSS-файл будет скомпилирован на основе исходников .scss при помощи Grunt.

Этот пост предполагает, что вы имеете некоторое представление о Bower, Grunt и Twitter Bootstrap.

Устанавливаем Twitter Bootstrap с SASS, используя Bower

Установим Twitter Bootstrap с SASS , при этом также загрузится jQuery:

bower install bootstrap-sass-official

пс: статья о Bower: зачем фронтенду нужен менеджер пакетов

Чтобы управлять нашими зависимостями нам потребуется bower.json. bower.json — в этом файле хранится список всех зависимостей проекта и другие метаданные. Чтобы создать данный файл нужно выполнить следующую команду:

bower init

Вам будет задан ряд вопросов, на которые вы можете нажимать enter и ответьте Yes на currently installed components as dependencies and add commonly ignored files to ignore list .

  "dependencies": {
    "bootstrap-sass-official": "~3.3.4"
  }

Устанавливаем Grunt

см. статью Введение в Grunt, настройка проекта и запуск задач

Создание папки с нашими «активами» (assets)

Давайте создадим папку assets и расположим в ней подпапки для CSS и SASS.

Идем дальше, создайте файл style.scss в папке sass и style.css в папке css.

В папке с нашим style.scss импортируем папку Twitter bootstrap:

@import 'app/bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap';

p.s. Обратите внимание как работает @import в sass: Импортирование, оператор @import в SASS

Далее нам потребуется создать Gruntfile, посредством которого мы сможет следить (watch) и компилировать наш scss файл.

Создание Gruntfile

см. статью Введение в Grunt, настройка проекта и запуск задач

Для того чтобы следить и компилировать наши Sass-файлы нам потребуется два плагина:

grunt-contrib-sass
grunt-contrib-watch

Вернитесь в терминал и введите следующий текст в папке проекта:

npm install grunt-contrib-sass --save-dev npm install grunt-contrib-watch --save-dev

Плагины будут установлены в папке node_modules.

Давайте загрузим из в наш Gruntfile, подключив их после закрывающей скобки grunt.initConfig:

grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');

Настройка плагинов SASS и Watch в нашем Gruntfile

В следующем шаге мы настроим SASS для нашего проекта.

Внутри grunt.initConfig включите следующий код.

sass: {
    dev: {
        options: {
            style: 'expanded',
            compass: false
        },
        files: {
            './assets/css/style.css':'./assets/sass/style.scss'
        }
    }
}

Включите следующий код, который позволит Grunt наблюдать за нашими файлами и автоматически обновлять их при запущенном Grunt:

watch: {
    options: { livereload: true, },
    sass: {
        files: ['./assets/sass/{,*/}*.scss',
                './bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/*.scss'],
        tasks: ['sass:dev'],
    },
}

Наконец, давайте автоматизируем наши задачи. Таким образом мы консолидируем все задачи и запустим их, прописав в терминале grunt.

Для этого нам потребуется следующая строка кода:

jQuery or Javascript

grunt.registerTask("default", ['watch']);

Результирующий Gruntfile

Вот так, приблизительно, выглядит Gruntfile:

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        sass: {
            dev: {
                options: {
                    style: 'expanded',
                    compass: false
                },
                files: {
                    './assets/css/style.css':'./assets/sass/style.scss'
                }
            }
        },
        watch: {
            options: { livereload: true, },
            sass: {
                files: ['./assets/sass/{,*/}*.scss',
                        './bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/*.scss'],
                tasks: ['sass:dev'],
                options: {
                    spawn: false,
                }
            },
            html: {
                files: ['./index.html']
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask("default", ['sass','watch']);
};

Clip-Clap