Доброго времени суток, господа девелоперы! В этой статье я расскажу, как сделать разработку под Linux действительно комфортной и удобной, чтобы она приносила только боль удовольствие.
Чего мы добиваемся:
Просматриваем страницу в браузере и правим в текстовом редакторе HTML и CSS/SASS. Код извлекаем напрямую из PSD, попутно корректируя до PixelPerfect прямо в браузере. При сохранении SASS автоматически преобразуется в CSS и загружается на сервер. Необходимые картинки из PSD шаблона вырезаем в два клика, после чего они так-же автоматически загружаются на сервер. Как этого добиться менее чем за пол часа? Я расскажу вам!
Сразу хочу предупредить вас, если ваш опыт работы более нескольких лет и вы являетесь достаточно опытным front-end'ером, то ничего нового вы в этой статье не найдете. Она предназначена для людей, которые относительно недавно присоединились к GNU/Linux сообществу или только решили к нему примкнуть.
Краткое содержание
- Выбор браузера
- Установка расширений для Firefox
- Выбор текстового редактора
- Необходимые расширения для Sublime Text 3
- Дополнительные инструменты и оптимизация системы
Большинство хороших программистов делают свою работу не потому, что ожидают оплаты или признания, а потому что получают удовольствие от программирования.
— 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:
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.32.0/install.sh | bash
Перезапускаем окно терминала и проверяем установку при помощи:
nvm --version
Если все установилось верно, вы увидите надпись «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({outputStyle: 'compressed'}).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 <%= file.relative %>",
title: "Gulp FTP [<%= options.hours %> Hours, <%= options.mins %> Min, <%= options.secs %> 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 предоставляю вам, я же использую оба инструмента по мере надобности
Результат
В результате мы имеем полностью оптимизированную систему, в которой большинство рутинных действий происходит автоматически, не отвлекая нас от восхитительного процесса созидания чего-то нового и интересного.
Автор: LazyNick7
