Автоматическая компиляция SASS в CSS

Поначалу для компиляции 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-файл. После окончания работ его можно спокойно удалить.