Web developer on linux

Инструментарий для front-end разработки под Linux

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

Чего мы добиваемся:
Просматриваем страницу в браузере и правим в текстовом редакторе HTML и CSS/SASS. Код извлекаем напрямую из PSD, попутно корректируя до PixelPerfect прямо в браузере. При сохранении SASS автоматически преобразуется в CSS и загружается на сервер. Необходимые картинки из PSD шаблона вырезаем в два клика, после чего они так-же автоматически загружаются на сервер. Как этого добиться менее чем за пол часа? Я расскажу вам!

Сразу хочу предупредить вас, если ваш опыт работы более нескольких лет и вы являетесь достаточно опытным front-end’ером, то ничего нового вы в этой статье не найдете. Она предназначена для людей, которые относительно недавно присоединились к GNU/Linux сообществу или только решили к нему примкнуть.

Краткое содержание

Большинство хороших программистов делают свою работу не потому, что ожидают оплаты или признания, а потому что получают удовольствие от программирования.
— Linus Torvalds

Выбираем браузер

Для удобной разработки нам нужен браузер, обладающий большинством встроенных полезных инструментов, чтобы как можно меньше заморачиваться с дополнительными настройками после установки.

Для этих целей отлично подойдет Firefox Developer Edition, который, как утверждают его разработчики собран «для тех, кто строит Интернет»Почему именно он, а не полюбившийся всем Google Chrome, например? А вот почему:

Плюсы

Полностью бесплатен

Мы же стремимся к свободе программного обеспечения, верно? Да и зачем переплачивать за некоторые вещи, если мы имеем достойную бесплатную альтернативу?!

Встроенные инструменты разработчика

По нажатию волшебной кнопки F12, браузер трансформируется переходит в режим разработки, в котором доступно редактирование CSS-стилей страницы, изменение HTML и отладка JavaScript прямо на странице, режим адаптивного дизайна, а так же мониторинг скорости загрузки страницы.
Подробнее вы можете почитать на официальной странице.

Мультипроцессорность без шаманства

Firefox Developer Edition поддерживает e10s — мультипроцессорность прямо из коробки, что ускоряет загрузку страниц до 400% по уверению разработчиков. Опять же, при желании этот режим легко отключается в настройках. (Кушает много RAM, ко к этому мы вернемся чуть позже)

Расширения для Firefox

Конечно же, хотя FDE и имеет большое количество дополнительных функций, он станет еще удобнее после установки дополнительных плагинов, а вот список самых основных из них:

Pixel Perfect

Безусловно, Pixel Perfect верстка стала стандартом, а этот плагин позволяет накладывать макеты сайта оверлеем, что существенно облегчает разработку.

Advanced Cookie Manager

Иногда возникает необходимость просмотреть, изменить либо удалить некоторые cookies, и этот плагин — отличное решение для этих целей. Так же он позволяет добавлять свои cookies.

User-Agent Switcher

Отличное решение для изменения User-Agent, как понятно из названия. Нажали кнопку, выбрали браузер, операционную систему и устройство. Готово! Вы восхитительны.

User-Agent Switcher

Аддон от автора предыдущего расширения. Позволяет добавлять кастомные User-Agent’ы, что тоже, собственно, видно из названия

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

Выбираем текстовый редактор

Безусловно, существует огромное количество различных текстовых редакторов и сред разработки, но я хотел бы выделить существенного лидера среди всех них — это Sublime Text 3. Его базовый функционал мало чем отличается от остальных, но после установки Package Control (пакетного менеджера для Sublime) — его функционал увеличивается в разы.
дальнейшие расширения будут установлены именно при помощи Package Control, а инструкцию по его установке вы можете найти тут.

Расширения для Sublime Text 3

Emmet и Emmet Css Snippets

На первом месте, конечно же Emmet, знакомый многим. Плагин, позволяющий ускорить написание HTML-кода в считанные разы. Подробнее о нем вы можете почитать тут, а Emmet Css Snippets позволяют творить такую же магию и с вашими CSS файлами.

Color Highlighter

Подсвечивание всех цветов в CSS (таких как «#FFFFFF», «rgb(255,255,255)», «white», и т.д.)
Существенно ускоряет разработку при совместном использовании с пипеткой.

SASS

Поддержка Sass синтаксиса для Sublime. Если вы еще не используете препроцессоры — рекомендую начать. А работу именно с Sass мы рассмотрим ниже.

SFTP

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

Оптимизация системы

Вот мы и плавно подошли к самому интересному, оптимизации системы и установке дополнительных приложений.

Браузер есть, текстовый редактор тоже готов к работе. Что остается? Просмотр PSD файлов и нарезка изображений. Под Linux. Серьезно?

Этот процесс может проходить с удовольствием, и в этом нам поможет замечательная программа Avocode, которая будто бы создана специально для нас. И пусть вас не смущает её цена за подписку, ее триал для одного email длится две недели, а нам никто не мешает иметь БОЛЬШОЕ количество e-mail адресов.

Программа позволяет просматривать PSD файлы, извлекать CSS-свойства объектов подобно Adobe Extract, но гораздо удобнее, а так же сохранять необходимые слои прямо в отдельный файл.

Как же нам автоматизировать преобразование SASS в CSS и склейку спрайтов из изображений? В этом поможет Node.js и Gulp.

Про функционал этих замечательных приложений вы можете почитать на официальных сайтах, а я расскажу вам, как все это дело настроить.

Устанавливаем NVM — это менеджер версий Node.js, который устанавливается при помощи обычного bash-скрипта. Открываем эмулятор терминала и прописываем следующее:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.0/install.sh | bash 

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.32.0/install.sh | bash 

Перезапускаем окно терминала и проверяем установку при помощи:

Если все установилось верно, вы увидите надпись «nvm» в консоли. Теперь мы готовы к установке Node.js и Gulp. Устанавливаем Node.js при помощи терминала:

nvm install v[vesrion] // вместо [vesrion] впишите необходимую вам версию, например v4.5.0 

Дожидаемся конца установки и ставим Gulp, последовательно выполняя следующие команды:

npm install --global gulp-cli 

После чего переходим в папку проекта и прописываем:

npm init npm install --save-dev gulp 

Осталось только настроить Gulp-файл для корректной работы всего, что мы установили выше. Создаем документ gulpfile.js и кладем в корень проекта. Прикрепляю свое содержание gulpfile.js ниже:

var gulp = require( 'gulp' ); //Используем Gulp var gutil = require( 'gulp-util' ); var ftp = require( 'vinyl-ftp' ); //Для загрузки файлов на FTP без использования SFTP var sass = require( 'gulp-sass' ); //Поддержка Sass var notify = require( 'gulp-notify' ); //Уведомления о загрузке на сервер var spritesmith = require('gulp.spritesmith'); //Создание спрайтов function getFtpConnection() < return ftp.create(< host: 'ИМЯ_ХОСТА', user: 'ИМЯ_ПОЛЬЗОВАТЕЛЯ', password: 'ПАРОЛЬ', parallel: 10, log: gutil.log, >); > var LocalScssFiles = ['./sass/style.scss']; var LocalFiles = ['./css/*.css', './index.php', './templateDetails.xml']; var FullPathFTP = '/public_html/autodiagnostic/templates/autodiagnostic'; gulp.task('sprite', function() < var spriteData = gulp.src('./psd/assets/*.*') // путь, откуда берем картинки для спрайта .pipe(spritesmith(< imgName: 'sprite.png', cssName: 'sprite.css', cssFormat: 'css', algorithm: 'binary-tree', cssVarMap: function(sprite) < sprite.name = 's-' + sprite.name >>)); spriteData.img.pipe(gulp.dest('./built/images/')); // путь, куда сохраняем картинку spriteData.css.pipe(gulp.dest('./css/')); // путь, куда сохраняем стили >); gulp.task('sass', function () < return gulp.src(LocalScssFiles) .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('./css')) >); gulp.task('watch', function() < var conn = getFtpConnection(); gulp.watch(LocalScssFiles, ['sass']); gulp.watch(LocalFiles).on('change', function(event) < return gulp.src( [event.path], < base: '.', buffer: false >) .pipe( conn.dest( FullPathFTP ) ) .pipe(notify(< message: "Updated ", title: "Gulp FTP [ Hours, Min, Sec]", templateOptions: < hours: new Date().getHours(), mins: new Date().getMinutes(), secs: new Date().getSeconds() >>)); ; >); >); 

Не буду подробно вдаваться в значение каждой строки, но могу описать работу с Gulp другой статье, если увижу, что вам это будет интересно.

Оптимизация системы

Небольшие советы по оптимизации вашей работы:

• Все программы, установленные выше, и, в частности, Firefox требуют большого объема оперативной памяти, с чем нам поможет справится zRam или zSwap.
• Удобную работу с терминалом обеспечит Guake
• Вместо Sublime и Avocode можно использовать Adobe Brackets с его встроенным Extract, но, говоря честно, поддержка шрифтов в Debian и Ubuntu оставляет желать лучшего.
• Выбор между SFTP и VinylFTP предоставляю вам, я же использую оба инструмента по мере надобности

Результат

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

Источник