Доброго времени суток, господа девелоперы! В этой статье я расскажу, как сделать разработку под Linux действительно комфортной и удобной, чтобы она приносила только боль удовольствие.
Чего мы добиваемся:
Просматриваем страницу в браузере и правим в текстовом редакторе HTML и CSS/SASS. Код извлекаем напрямую из PSD, попутно корректируя до PixelPerfect прямо в браузере. При сохранении SASS автоматически преобразуется в CSS и загружается на сервер. Необходимые картинки из PSD шаблона вырезаем в два клика, после чего они так-же автоматически загружаются на сервер. Как этого добиться менее чем за пол часа? Я расскажу вам!
Сразу хочу предупредить вас, если ваш опыт работы более нескольких лет и вы являетесь достаточно опытным front-end'ером, то ничего нового вы в этой статье не найдете. Она предназначена для людей, которые относительно недавно присоединились к GNU/Linux сообществу или только решили к нему примкнуть.
Для удобной разработки нам нужен браузер, обладающий большинством встроенных полезных инструментов, чтобы как можно меньше заморачиваться с дополнительными настройками после установки.
Для этих целей отлично подойдет Firefox Developer Edition, который, как утверждают его разработчики собран «для тех, кто строит Интернет»Почему именно он, а не полюбившийся всем Google Chrome, например? А вот почему:
Мы же стремимся к свободе программного обеспечения, верно? Да и зачем переплачивать за некоторые вещи, если мы имеем достойную бесплатную альтернативу?!
По нажатию волшебной кнопки F12, браузертрансформируется переходит в режим разработки, в котором доступно редактирование CSS-стилей страницы, изменение HTML и отладка JavaScript прямо на странице, режим адаптивного дизайна, а так же мониторинг скорости загрузки страницы.
Подробнее вы можете почитать на официальной странице.
Firefox Developer Edition поддерживает e10s — мультипроцессорность прямо из коробки, что ускоряет загрузку страниц до 400% по уверению разработчиков. Опять же, при желании этот режим легко отключается в настройках. (Кушает много RAM, ко к этому мы вернемся чуть позже)
Конечно же, хотя FDE и имеет большое количество дополнительных функций, он станет еще удобнее после установки дополнительных плагинов, а вот список самых основных из них:
Безусловно, Pixel Perfect верстка стала стандартом, а этот плагин позволяет накладывать макеты сайта оверлеем, что существенно облегчает разработку.
Иногда возникает необходимость просмотреть, изменить либо удалить некоторые cookies, и этот плагин — отличное решение для этих целей. Так же он позволяет добавлять свои cookies.
Отличное решение для изменения User-Agent, как понятно из названия. Нажали кнопку, выбрали браузер, операционную систему и устройство. Готово! Вы восхитительны.
Аддон от автора предыдущего расширения. Позволяет добавлять кастомные User-Agent'ы, что тоже, собственно, видно из названия
Вот, собственно, и разобрались с основными расширениями для браузера и можем смело переходить к выбору и настройке нашего текстового редактора.
Безусловно, существует огромное количество различных текстовых редакторов и сред разработки, но я хотел бы выделить существенного лидера среди всех них — это Sublime Text 3. Его базовый функционал мало чем отличается от остальных, но после установки Package Control (пакетного менеджера для Sublime) — его функционал увеличивается в разы.
дальнейшие расширения будут установлены именно при помощи Package Control, а инструкцию по его установке вы можете найти тут.
На первом месте, конечно же Emmet, знакомый многим. Плагин, позволяющий ускорить написание HTML-кода в считанные разы. Подробнее о нем вы можете почитать тут, а Emmet Css Snippets позволяют творить такую же магию и с вашими CSS файлами.
Подсвечивание всех цветов в CSS (таких как "#FFFFFF", «rgb(255,255,255)», «white», и т.д.)
Существенно ускоряет разработку при совместном использовании с пипеткой.
Поддержка Sass синтаксиса для Sublime. Если вы еще не используете препроцессоры — рекомендую начать. А работу именно с Sass мы рассмотрим ниже.
Иногда возникает необходимость правки файлов именно на сервере либо любая другая работа с FTP. Этот плагин поможет вам без установки дополнительного программного обеспечения править файлы удаленно, скачивать их на компьютер любо наоборот загружать на сервер с огромной скоростью и удобством.
Вот мы и плавно подошли к самому интересному, оптимизации системы и установке дополнительных приложений.
Браузер есть, текстовый редактор тоже готов к работе. Что остается? Просмотр PSD файлов и нарезка изображений. Под Linux. Серьезно?
Этот процесс может проходить с удовольствием, и в этом нам поможет замечательная программа Avocode, которая будто бы создана специально для нас. И пусть вас не смущает её цена за подписку, ее триал для одного email длится две недели, а нам никто не мешает иметь БОЛЬШОЕ количество e-mail адресов.
Программа позволяет просматривать PSD файлы, извлекать CSS-свойства объектов подобно Adobe Extract, но гораздо удобнее, а так же сохранять необходимые слои прямо в отдельный файл.
Как же нам автоматизировать преобразование SASS в CSS и склейку спрайтов из изображений? В этом поможет Node.js и Gulp.
Про функционал этих замечательных приложений вы можете почитать на официальных сайтах, а я расскажу вам, как все это дело настроить.
Устанавливаем NVM — это менеджер версий Node.js, который устанавливается при помощи обычного bash-скрипта. Открываем эмулятор терминала и прописываем следующее:
Либо при помощи Wget:
Перезапускаем окно терминала и проверяем установку при помощи:
Если все установилось верно, вы увидите надпись «nvm» в консоли. Теперь мы готовы к установке Node.js и Gulp. Устанавливаем Node.js при помощи терминала:
Дожидаемся конца установки и ставим Gulp, последовательно выполняя следующие команды:
После чего переходим в папку проекта и прописываем:
Осталось только настроить Gulp-файл для корректной работы всего, что мы установили выше. Создаем документ gulpfile.js и кладем в корень проекта. Прикрепляю свое содержание gulpfile.js ниже:
Не буду подробно вдаваться в значение каждой строки, но могу описать работу с Gulp другой статье, если увижу, что вам это будет интересно.
Небольшие советы по оптимизации вашей работы:
В результате мы имеем полностью оптимизированную систему, в которой большинство рутинных действий происходит автоматически, не отвлекая нас от восхитительного процесса созидания чего-то нового и интересного.
Чего мы добиваемся:
Просматриваем страницу в браузере и правим в текстовом редакторе HTML и CSS/SASS. Код извлекаем напрямую из PSD, попутно корректируя до PixelPerfect прямо в браузере. При сохранении SASS автоматически преобразуется в CSS и загружается на сервер. Необходимые картинки из PSD шаблона вырезаем в два клика, после чего они так-же автоматически загружаются на сервер. Как этого добиться менее чем за пол часа? Я расскажу вам!
Сразу хочу предупредить вас, если ваш опыт работы более нескольких лет и вы являетесь достаточно опытным front-end'ером, то ничего нового вы в этой статье не найдете. Она предназначена для людей, которые относительно недавно присоединились к GNU/Linux сообществу или только решили к нему примкнуть.
Краткое содержание
- Выбор браузера
- Установка расширений для Firefox
- Выбор текстового редактора
- Необходимые расширения для Sublime Text 3
- Дополнительные инструменты и оптимизация системы
Большинство хороших программистов делают свою работу не потому, что ожидают оплаты или признания, а потому что получают удовольствие от программирования.
— Linus Torvalds
Выбираем браузер
Для удобной разработки нам нужен браузер, обладающий большинством встроенных полезных инструментов, чтобы как можно меньше заморачиваться с дополнительными настройками после установки.
Для этих целей отлично подойдет Firefox Developer Edition, который, как утверждают его разработчики собран «для тех, кто строит Интернет»Почему именно он, а не полюбившийся всем Google Chrome, например? А вот почему:
Плюсы
Полностью бесплатен
Мы же стремимся к свободе программного обеспечения, верно? Да и зачем переплачивать за некоторые вещи, если мы имеем достойную бесплатную альтернативу?!
Встроенные инструменты разработчика
По нажатию волшебной кнопки F12, браузер
Подробнее вы можете почитать на официальной странице.
Мультипроцессорность без шаманства
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 ниже:
Мой 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 предоставляю вам, я же использую оба инструмента по мере надобности
Результат
В результате мы имеем полностью оптимизированную систему, в которой большинство рутинных действий происходит автоматически, не отвлекая нас от восхитительного процесса созидания чего-то нового и интересного.