Как правильно подключать файл с миксинами в Gulp поток компиляции SASS при модульной структуре проекта?

Question

[Дмитрий Сергеевич]

Всем привет, недавно переработал свой стартовый шаблон. Сделал его модульным. Теперь у меня есть такое:

SASS
   helpers
     _functions.scss
     _helpers.scss
     _functions.scss
     _mixins.scss
     _variables.scss

Для того чтобы использовать все это, в файле some_page.scss я прописываю import'ы в some_page.scss:

@import '../helpers/functions';
@import '../helpers/helpers';
@import '../helpers/mixins';
@import '../helpers/variables';

Честно говоря, это убогое решение. При изменении хелперов, для того чтобы они применялись, мне требуется перезагружать Gulp чтобы файлы сосчитали импорты заново. Может есть какой-то другой способ подсунуть их в поток компиляции SASS?

Сейчас у меня 5 потоков:

gulp.watch('./dev/sass/global/*.scss',   ['sass-global'])
gulp.watch('./dev/sass/layout/*.scss',   ['sass-layout'])
gulp.watch('./dev/sass/pages/*.scss',    ['sass-pages'])
gulp.watch('./dev/sass/features/*.scss', ['sass-features'])
gulp.watch('./dev/sass/helpers/*.scss',  ['sass-helpers'])

У каждого потока свои особенности компиляции, поэтому объединить их в один не вариант.

Если говорить проще. Мне нужно избавиться от impоrt'а папки helpers в остальных .scss файлах. Папку helpers мне не нужно никуда компилировать. Нужно сделать так чтобы таск просто считывал миксины, переменные и функции.

Подскажите пожалуйста как это все сделать по-человечески!?

Answer 1

[Николай Шабалин]

Вам нужно настроить таску, чтобы она смотрела на всю папку sass

Таска

gulp.task('sass', function() {
 gulp.src('/dev/sass/**/*.scss')
  .pipe(sass())
  .pipe(gulp.dest('место куда должно компилится'))
});

Watch
gulp.watch('/dev/sass/**/*.scss', ['sass']);

Настройки, конечно же подставьте свои.

Comments

[Дмитрий Сергеевич]

Возможно вы меня не поняли (или я вас). Если говорить проще. Мне нужно избавиться от impоrt'а папки helpers в остальных .scss файлах. Папку helpers мне не нужно никуда компилировать. Нужно сделать так чтобы таск просто считывал миксины, переменные и функции.

[Николай Шабалин]

Дмитрий Сергеевич: создайте один файл в который вы импортите все ваши хелперы, и импортите этот файл туда куда вам нужно. Но у меня начинает возникать вопрос - "А зачем вам файл some_page.scss", вы же не делаете стили для каждой отдельной страницы, так чтобы они компилились в отдельные css файлы?

[Дмитрий Сергеевич]

Дело в том что именно так я и делаю. В потоке pages каждый файл компилируется отдельно и для каждой страницы отдельный стиль. Изначально у меня был один фиал в которым были все импорты, но потом при работе я понял что css импорт это зло и от его надо избавиться.

[Николай Шабалин]

А зачем вы делаете css импорты, когда вы пользуетесь SASS?

[Николай Шабалин]

*делали

[Николай Шабалин]

У меня просто складывается ощущение, что Вы делаете, что-то ни так, я готов помочь, но пока не понимаю чем =)

[Дмитрий Сергеевич]

Николай Шабалин: Я понимю, поэтому стараюсь максимально чётко отвечать на ваши наводящее вопросы ;) Я использовал импорты для того чтобы не пихать кучу громоздких миксинов в каждый фиал, да и вообще удобно модульно библиотечно. Тут либо все писать фаил, либо импортом, другого способа инициализировать эти хэлперы я на не нашёл. В идеале надо подсовывать его в потоки, но потоков может быть несколько и копировать путь в каждый как то не по фронтендерски

Answer 2

[Андрей Хохлов]

Посмотрите на Bootstrap 4 (думаю в авторитетности этих парней сомневаться не приходится)

Есть n файлов вида _filename.scss
Эти файлы не компилируются сами по себе.

Есть n файлов вида filename.scss, которые компилируются в /some/path/filename.css
В этих файлах мы @import нужные нам модули.

Bootstrap предлагает собрать как полный набор стилей (bootstrap.scss), так и только сетку (bootstrap-grid.scss)

На всё это один watcher и один поток.

Оотдельный css для отдельной странице - зло. Выигрыша никакого, проблем много. Погуглите на эту тему.
Меня бы backend'еры побили бы за такое :(

Comments

[Дмитрий Сергеевич]

Спасибо за ссылку на бустрап 4! Я так понимаю вы занимаетесь версткой под Битрикс? Не могли бы вы написать как вы верстаете под битрикс? Вернее в каком виде вы передаете файлы для интеграции в битрикс вашим бекендерам?

[Андрей Хохлов]

Дмитрий Сергеевич: От ситуации зависит.

Мой сборщик имеет настройки - что куда собирать, минифицировать или нет и т.д.

Если говорить о моей команде, то у нас всё идет через git и условный проект работает примерно так:

1. Cоздаю репозиторий, или клонирую уже созданный (в этом случае там уже будут файлы битрикса). Сама папка bitrix в .gitignore! Веточка у меня будет mark-up.

2. С помощью yeoman разворачиваю структуру проекта, устанавливаю зависимости.

3. Верстаю, при этом в других ветках может уже вполне начаться работа других разработчиков. Можем и параллельно - страничка готова - запрогали. Правда я обычно делаю сразу все страницы, вернее не страницы - а блоки и расставляю их по страницам.

Шаблон сайта вынесе в папку local (из коробки он внутри bitrix) . Статика собирается в папку шаблона (assets), единственное что стили приходится собирать в файл styles.css вне папки assets. Всё что собирается - лежит в .gitignore.

joxi.ru/vAWy6OQfvqo9mW

HTML файлы лежат в отдельной папке в корне сайта, пути в них прописаны до папки local соответственно.

Когда настало время натягивать верстку, программист сливается с моей веткой (если делаем параллельно то сливаемся регулярно), так же ставит npm пакеты, открывается собравшуюся верстку и вперед.
js так же пишет в src и собирает, иногда за исключением каких-то отдельных компонентов где всё лежит в их папочках.

Когда возникает необходимость поправить что-то в шаблонах, я часто сам лезу в php файлы, исправляю шаблон сайта и (до или после) исправляю jade-файлы, чтобы верстка соответствовала тому что натянуто на битрикс. Это здорово помогает если спустя время нужно что-то серьёзно доверстать/переверстать и проще будет сделать это в верстке, чем в шаблонах (я люблю jade и когда приходится ковырять html, да ещё и с кусками php-кода - потом плохо сплю ночами).

Но это мы так договорились работать и всем удобно.

В Битриксе из коробки в папке каждого компонента лежат его php, css и js файлы. И он сам там что-то как-то склеивает и минифицирует. Компоненты - список новостей, хлебные крошки, форма поиска и т.д. Многие команды именно так и работают.

Такой подход конечно тоже можно как-то соединить с параллельной версткой, scss, gulp и т.д. Но это будет боль и унижение.

Собственно так же боль и унижение не использовать мощь препроцессоров и прочей радости при поддержке проекта).

Если я верстаю для другого заказчика - под битрикс, или не под битрикс - не важно. То:
- не минифицирую файлы, но причесываю (csscomb например)
- не объединяю файлы плагинов
- на всякий случай отдаю исходники, вдруг решат встать на путь истинный

Что касается особенностей верстки под битрикс, как говорится - нормально делай, нормально будет.
Главное z-index (в том числе у плагинов проверить, модальные окна и т.д.) не задирать выше 1000, иначе эрмитаж не видно.

[Дмитрий Сергеевич]

Андрей, большое Вам спасибо! На меня каждый день материться бекенд! Знайте, вы сделали жизнь нескольких человек лучше =) Спасибо еще раз за такой подробный овтет!