Конечно, уже никого не нужно убеждать в том, какую пользу мы получаем при использовании препроцессоров в Web-разработке. Понятно, что существенно упрощается и автоматизируется процесс верстки, что, естественно, дает немалый выигрыш времени, затраченного на разработку, не нужно заботиться о префиксах при использовании каких-то новых свойств CSS. Да и многое, многое другое…Умный препроцессор сделает все за вас. В общем, польза очевидна.
Но вот далеко не очевидно, в каком виде использовать препроцессоры. Я использую Sass, поэтому буду говорить о нем. На официальном сайте Sass рекомендуют целый список программ, обеспечивающих работу с препроцессором. Пробовал из них две – бесплатную Koala и условно платную Prepros. В принципе, все работает. Чуть-чуть пришлось повозиться с настройкой путей в Prepros.Но все решаемо. Проблема, как мне кажется, в другом. Приходится использовать стороннюю программу, которую нужно , во-первых, установить, во-вторых, нужно потратить какое-то время на ее освоение, ну и в третьих, захламляется компьютер всякой всячиной.
Все равно ведь приходится пользоваться текстовым редактором. Мне очень нравится VS Code - великолепный «кодерский» редактор, "нашпигованный" на все случаи в жизни, если его правильно настроить. Просто устанавливается несколько плагинов, и все. Препроцессор работает автоматически, отслеживая все изменения в исходных файлах. Да еще и в браузере все изменения отображаются. Что еще нужно?
Вроде бы все здорово. Но есть одна незадача. За все в этой жизни надо платить. VS Code весьма тяжел, и не очень дружит с маломощными машинами. Он «пожирает» много ресурсов компьютера. А если они ограничены, то появляются проблемы. Во-первых, компиляция происходит довольно медленно. Но это еще можно пережить. А вот то, что через какое-то время редактор просто отказывается компилировать нужные файлы, это уже совсем не здорово. Особенно, если это более или менее «накрученная» страница. Волей-неволей приходится возвращаться к истокам. Тут начинаешь думать и о «голых» компиляторах и о Vim, как о фантастически легком и быстром редакторе.
Так я пришел к пониманию использования терминала, точнее его эмулятора. Можно сказать, нужда заставила. Впрочем, совершенно не жалею. Работают такие компиляторы гораздо быстрее всех этих рекомендованных программ. У них нет графической оболочки. При этом для запуска компилятора надо сделать всего несколько лишних движений в начале (потом тоже все работает автоматически). Зато какой выигрыш! Есть смысл...
Тут, наверное, надо сказать несколько слов о терминале.
Если вы более или менее серьезно занимаетесь программированием, то GitHub вам, конечно, не избежать. Его надо установить на компьютер. А при установке автоматически устанавливается и эмулятор терминала Git Bash. И это очень здорово, потому что он на много интересней, чем традиционная командная строка Windows (хотя можно пользоваться и ею). Не очень хочется говорить об этой программе вскользь и мимоходом, поэтому подробней о ней как-нибудь в другой раз. Она стоит отдельного разговора.
Известно, что из терминала установка программ происходит быстрее и надежнее, чем при других способах. Ну и еще чисто психологический момент. – для «программера» умение пользоваться терминалом – весьма полезный навык. Да и быстрей и короче получается.
И так, если использовать для установка Sass терминал, то наиболее очевидными способами будут – применение Node.js или Ruby.
В первом случае, если не установлен Node.js, то его нужно установить с официального сайта. А далее используем ее пакет установки npm. В командной строке вводим команду:
Правда, на официальном сайте Sass сообщается, что при этом способе установки Sass будет работать медленнее, из-за использования нативного JavaScript.
Есть и еще одна небольшая «засада». Иногда все ставится и потом работает нормально. А иногда бывает, что Sass устанавливается, как будто нормально, а работает «криво», то есть некоторые функции могут не работать или работать неправильно.
В причинах не разбирался, но есть подозрение, что связано это с некоторой несовместимостью версий ОС и Node.js . Немножко капризный этот JavaScript.Уже были случаи «плевания» по этому поводу, но это уже другая история...
Если через Node.js Sass нормально установить не удалось, тогда устанавливаем его используя компилятор Ruby. Кстати, скажу, что мне этот вариант понравился гораздо больше, при всем уважении к Node.js.
Для этого с официального сайта Ruby по адресу http:\\rubyinstaller.org\downloads скачиваем версию, рекомендуемую в случае, когда вы не знаете, какая версия вам нужна. Я не знал, какая версия нужна мне, поэтому последовал рекомендации. На момент написания статьи - это версия Ruby+Devkit2.7.X(x64). При этом надо учитывать разрядность ОС Windows. В моем случае она 64-х разрядная. Дальше устанавливаем и запоминаем путь установки Ruby. По умолчанию это - С:\Ruby27-x64.
В терминале переходим в эту папку. Если используется Git Bash, то это просто (клик ПКМ на этой папке и выбираем Git Bash here). Из командной строки Windows придется переходить вручную. И это не единственное преимущество Git Bash.
Затем устанавливаем Sass в этой папке командой:
Проверяем правильность установки:
Если все сделано правильно, то появиться версия установленного Sass. Например, Ruby Sass 3.7.4.
Теперь можно пользоваться компилятором. Для этого переходим в папку в проектом (ПКМ - Git Bash here).
Если надо один раз скомпилировать проект, набираем в терминале:
где scss/style.scss - путь к исходному файлу в проекте, исходя из корневой папки проекта;
css/style.css - путь к конечному файлу style.css.
При этом в конечной папке скомпилируется и файл карты ресурсов с расширением .map. Если проект не очень большой, то, скорее всего, он не нужен. Чтобы отменить генерацию этого файла, используем опцию --sourcemap=none.
Тогда команда будет выглядеть так:
При необходимости постоянного отслеживания изменений в исходном файле, удобнее использовать другую команду:
При этом все изменения компилируются автоматически. Остается только перезагрузить браузер (Кнопка F5). Всего одно лишнее движение - а выигрыш во времени довольно заметный. А самое главное, все работает...
