Bower и Sass в структуре папок, подобной Rails

Итак, я работаю над этим проектом, который имеет структуру папок, подобную Rails, хотя он обрабатывается инструментарием Node.js (Grunt как исполнитель задач). Я использую Bower для управления активами моих поставщиков.

Моя структура папок выглядит так:

  .
  └── src
      ├── app
      │   └── assets
      │       ├── javascripts
      │       └── stylesheets
      │           └── application.scss
      ├── public
      └── vendor
          └── bower

По сути, весь исходный код разработки находится в папке app/assets, public - это производственные файлы, а vendor - это файлы сторонних разработчиков.

Итак, как видите, у меня есть этот application.scss файл. Это манифест таблицы стилей, который я использую. Он отвечает за импорт всех модулей, которые должны быть скомпилированы в мой окончательный файл таблицы стилей позже.

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

С Rails Asset Pipeline / Sprockets я бы сделал //= require_tree vendor/bower, и это сработало бы, но я не знаю, что эквивалентно этому в контексте этого проекта.

Ребята, у вас есть какие-нибудь предложения, что я могу сделать?

Ps .: Использование задач Grunt для «обработки» этого не может быть и речи.


node.js sass bower gruntjs asset-pipeline
person Community    schedule 12.02.2014    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Просто настройте Bower для установки пакетов на vendor/assets/components, создав файл с именем .bowerrc в корневом каталоге.

{"directory": "vendor/assets/components"}

Все, что находится внутри vendor/assets и app/assets, добавляется в путь загрузки, поэтому вы можете просто ссылаться на эти файлы.

Возможно, вам потребуется поместить фактический файл, который вы хотите загрузить. Допустим, вы установили пакет normalize-scss. Возможно, вам придется добавить это в свой application.scss файл:

@import "normalize-scss/normalize";

Это всего лишь предположение, но я готов поспорить.

РЕДАКТИРОВАТЬ: это будет работать в приложениях Rails, что, по-видимому, не в вашем случае. Поэтому, если вы используете Grunt для компиляции SCSS, вы можете добавить каталог Bower в свой путь загрузки с помощью параметра loadPath.

Задача Sass в Gruntfile может выглядеть примерно так:

{
  sass: {
    dist: {
      files: {"src/assets/stylesheets/application.scss": "public/application.css"},
      options: {
        loadPath: ["vendor/bower"]
      }
    }
  }
}

Чтобы импортировать файл, вы сделаете что-то вроде того, что я сказал выше (ссылка на весь файл). Не тестировал конфигурацию Grunt, но, вероятно, она сработает.

person Nando Vieira    schedule 12.02.2014

arrow_upward
0
arrow_downward

Bower скачивает целые репозитории git.

Пример:

bower install jquery

Это создаст следующую структуру

tree vendor/bower 
bower
└── jquery
    ├── bower.json
    ├── component.json
    ├── composer.json
    ├── jquery.js
    ├── jquery-migrate.js
    ├── jquery-migrate.min.js
    ├── jquery.min.js
    ├── jquery.min.map
    ├── package.json
    └── README.md

1 directory, 10 files

На мой взгляд, нет смысла загружать все эти файлы.

Что вы могли бы сделать:

  • создать vendor/require каталог

  • символическая ссылка на все необходимые файлы в этот каталог:

    cd vendor/require; ln -s ../bower/jquery/jquery.min.js

  • затем потребовать все файлы с помощью ruby ​​или вручную

    Dir['path/to/vendor/require/*.js'].each do |file_name|
  puts "<script type="text/javascript" src="#{file_name}"></script>"
end

Вы также можете использовать Grunt и его задачу concat:

grunt.initConfig({
  concat: {
    options: {
      separator: ';',
    },
    dist: {
      src: ['path/to/vendor/bower/jquery/jquery.min.js', 'path/to/vendor/bower/other-package/init.min.js'],
      // or if You decide to create those symlinks
      // src: ['path/to/vendor/require/*'],
      dest: 'path/to/public/js/built.js',
    },
  },
});

Для compass на sass Вы можете использовать:

@import 'path/to/directory/*';
person czerasz    schedule 12.02.2014