Bower + Grunt + Sass

Теперь, когда мы узнали мощь Bower для лёгкого управления фронтенд-разработкой зависимостей, что нам нужно сделать, чтобы добавить пакет Sass в наш проект?

Установка Bower

Для начала, давайте установим простой пакет Bower для иллюстраций:

$ bower install css-calc-mixin --save

Теперь у нас есть библиотека кода в нашем проекте.

Обновление Gruntfile.js

Далее мы хотим обновить Gruntfile.js, чтобы можно было легко включить библиотеку в наши Sass-файлы. Без этого шага нам потребуется написать заполнение путей в нашем Sass-файле, а это просто убого.

В Grunt-Sass API у нас есть варианты и один из них, который нам нужен для применения — это includePaths. Он может передать полный путь от корня к пакету Bower в массив.

module.exports = function(grunt) {
  grunt.initConfig({
    sass: {
      dist: {
        files: {
          'public/stylesheets/style.css': 'sass/style.scss'
        }
      },
      options: {
        includePaths: [
          './bower_components/css-calc-mixin'
        ]
      }
    },
    watch: {
      source: {
        files: ['sass/**/*.scss', 'views/**/*.jade'],
        tasks: ['sass'],
        options: {
          livereload: true, // needed to run LiveReload
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-sass');
  grunt.registerTask('default', ['sass']);
};

Обновление style.scss

Чтобы использовать эту новую библиотеку Bower мы должны просто указать правило Sass для импорта кода.

@import "css-calc-mixin";

Чтобы убедиться что это работает, давайте добавим немного кода который ссылается на библиотеку Bower.

.block {
  @include calc(width, 220px);
}

.block {
  @include calc(margin, 220px, 0);
}

.block {
  @include calc(width, 220px, true, 0);
}

.block {
  @include calc(width, 220px, true, 0, 50%, '+');
}

Вернитесь в консоль, запустите grunt и вы должны увидеть зелёный свет!