Поначалу для компиляции sass-файлов в css я использовал сторонние программы, вроде Koala. Через какое-то время она стала жутко тормозить и грузить комп и чем больше отслеживаемых файлов, тем больше эти тормоза. После этого я попробовал поработать через Grunt, но там не очень удобно добавлять каталоги, да и когда их много для отслеживания, тоже возникает большая нагрузка.
В итоге я поменял сам подход к sass-компиляции. Вместо того, чтобы отслеживать сразу кучу каталогов и файлов, достаточно отслеживать только те, с которым идет работа прямо сейчас.
В Sass уже встроенна поддержка отслеживания файлов (watch), поэтому можно легко ей воспользоваться.
В каждый каталог шаблона размещается файл sass-watch.bat такого содержания:
start /min sass --debug-info --watch assets/sass/:assets/css/ --sourcemap=none --style compressed
Пути указываются относительно этого файла. В данном случае:
- assets/sass/ — каталог, где находятся scss-файлы
- assets/css/ — каталог, куда помещаются скопилированные css-файлы
Параметр --sourcemap=none указывает не создавать map-файл. Если он нужен вместо none можно указать auto.
Теперь, когда нужно включить компиляцию, достаточно запустить этот bat-файл, который запустит Sass в режиме watch. Консольное окно будет минимизировано, но в нём будет отображаться вся отладочная информация. После того, как работа завершена, окно можно закрыть.
Теперь пару слов о самих sass/scss-файлах. Если имя файла начинается с символа подчеркивания («_»), то такой файл не компилируется (но отслеживается!). Таким образом без символа подчеркивания нужно оставить только тот файл, который следует скомпилировать. Обычно это style.scss из которого получится style.css.
В процессе компиляции Sass создаёт служебный каталог .sass-cache. Он располагается на том же уровне, что и bat-файл. После окончания работ его можно спокойно удалить.
Комментариев: 5 RSS
1Николай06-09-2018 17:19
Скопировал код, compressed заменил на expanded. Запустил и ничего не произошло.
У меня куча sass фалов которые лежат в разных пяти папках.
В папке assets/css/ лежат следующие папки:
\.sass-cache
\1-tools
\2-basics
и т.д. ещё три папки и один файл main.sass
Подскажите, что я сделал неправильно?
2MAX06-09-2018 20:12
Используйте для scss-файлов отдельный каталог (assets/sass). Сейчас у вас всё в куче.
3Николай06-09-2018 20:31
Переименовал папку assets/css/ в assets/sass/, на всякий случай создал папку assets/css/, хотя батник должен сам её сделать, внёс изменения в батник:
Запустил и ничего не изменилось.
4MAX06-09-2018 21:27
Параметры в одну строчку? Какое сообщение в консоли?
5Николай07-09-2018 13:03
Спасибо, всё получилось!
Ошибка, как правильно сказали, параметры не в строчку были, а в столбик.