Чего мы добиваемся:
Просматриваем страницу в браузере и правим в текстовом редакторе 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 ниже:
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 предоставляю вам, я же использую оба инструмента по мере надобности
Результат
В результате мы имеем полностью оптимизированную систему, в которой большинство рутинных действий происходит автоматически, не отвлекая нас от восхитительного процесса созидания чего-то нового и интересного.
Комментарии (36)
ncuxomozg
13.10.2016 10:49+4Редактор кода, sftp, avocode, это всё прекрасно. Простите, а вы уверены что ваш инструментарий сильно изменится, будь он на какой то другой системе?
Окей, на винде нет удобной встроенной консоли для игр с npm, так же как на linux нет нативного фотошопа. Но, хочу заметить, обе эти проблемы легко решаются. В маке же есть и то и другое.
Поймите меня правильно, я просто не понял в чём профит конкретно linux в конкретной статье.
k102
13.10.2016 12:12Вынужденно переехал на windows. Вместо guake использую ConEmu — замена более чем адекватная
Free_ze
13.10.2016 15:56Статья не про сравнение операционных систем, а про организацию рабочего окружения конкретно на Linux.
ncuxomozg
13.10.2016 16:07Вот именно в этом месте у меня и вопросы. Вчитайтесь что написано:
1. Скачать firefox
2. Скачать плагины для firefox
3. Скачать avacode
4. Установить саблайм
5. Накатить модулей на саблайм
6. Установить npm
С первого по пятый пункт можно проделать аналогично на любой системе. С 6-м пунктом можно справиться упомянутым выше ConEmu. Так и причем тут linux? На мой взгляд, разница только в том, как вы photoshop ставить будете. Тем более человек на sftp через gui ходит, был ли смысл такого перехода?Free_ze
13.10.2016 17:05Так и причем тут linux?
Как минимум тем, что мы ограничены множеством софта, которое актуально для Linux.
был ли смысл такого перехода?
Переход и его смысл в статье не обсуждается.
Представьте, что вы безумно любите Linux, но деньги зарабатывать умеете только в веб-фронт. А уж за что любить Linux и какой в этом смысл — пол-Хабра статей.
Svet6os6laV6
14.10.2016 23:12По собственному выбору не нужно судить других. У linux большой потенциал, именно поэтому его встраивают в windows, так что под чем разрабатывать это уже дело каждого. Как по мне, так статья годная, в особенности для новичков.Сам не так давно на лине сижу, и хотелось бы что бы виртуалка была менее лагучая, а я не знал, точнее мне не приходило в голову что есть такого рода проги «zRam».
Gugic
13.10.2016 10:52+1По какой-то непонятной причине FF при включенных developer tools у меня работает в целом ощутимо медленнее чем chromium. Не знаю с чем это связано, но вот как-то так.
KlimovDm
13.10.2016 11:31+1>>> существует огромное количество различных текстовых редакторов и сред разработки
>>> но я хотел бы выделить существенного лидера среди всех них — это Sublime Text 3
Не уверен, что это «существенный» лидер. WebStrom интереснее. imho.
>>> И пусть вас не смущает цена за подписку
Далее:
>>> В результате мы имеем полностью оптимизированную систему
Не понял, в чем заключается оптимизация. Тем более — «полная». Ну создали вы среду разработки, удобную для вас. Прекрасно, работайте. А если кому-то удобнее использовать Хром, webstrorm и grunt вместо gulp — у него что, система будет не оптимизирована?
grossws
13.10.2016 11:54+3Полностью бесплатен
Мы же стремимся к свободе программного обеспечения, верно? Да и зачем переплачивать за некоторые вещи, если мы имеем достойную бесплатную альтернативу?!Научились бы различать бесплатное и свободное. Это две большие разницы, да.
grossws
13.10.2016 11:56+5Особо эпично в данном контексте выглядит дальнейшая агитация за несвободный и небесплатный sublime text.
gunlinux
15.10.2016 00:29+1Сорвали комментарий с уст. Еще зацепил "Функционал". И закопайте уже
стюардессу/ftp.
nvm правда нужен для установленного в итоге глобально gulp?
Avocode, которая будто бы создана специально для нас. И пусть вас не смущает её цена за подписку, ее триал для одного email длится две недели, а нам никто не мешает иметь БОЛЬШОЕ количество e-mail адресов.
Rly?
alltiptop
13.10.2016 14:16Что принципиально изменится если заменить текстовый редактор на Geany || Kdevelop || Vim || Emacs и т.д.?
kahi4
13.10.2016 16:46+5"Инструменты фронт-энд разработки под линукс". И ставим только ff. Фронт-энд разработчик. Я что-то не понимаю? У меня одновременно стоят штук 5 браузеров, еще android и window в виртуалках (если говорить про линукс, то +1 виртуалка с macOS). Мало того, что то, что одно работает в ff еще не говорит, что оно заработает в хроме, так на других ОС вообще всплывать камни могут просто неожиданные (например, отказ грузить виндой не патченные ttf шрифты или лаги сафари если на странице много элементов с filter: blur, у которых забыли проставить какой-либо стиль, чтобы блок рисовался через видеокарту. Да, странная ошибка, но она есть).
Про плагины уже молчу. Каждый выбирает набор себе сам, тут вообще очень скромный. К слову, что хром, что ff умеет подставлять другой юзерагент из коробки из девтулз, зачем для этого еще свой плагин ставить? И, субъективно, в хроме dev tools удобнее, не считая возможности отладки шейдеров у ff.
Редактор. Во-первых, sublime text не открытый и не бесплатный. Во-вторых, почему именно он? Освойте vim и будет вам счастье, если хочется гибкости. Если хочется функционала — WebStorm. Опять же — кому что удобно. И, кто бы сколько не спорил, на linux уметь пользоваться вимом полезно, пусть он и не основной редактор.
Оптимизация системы. Тут больше пунктов, которые… скажем так, выбираются из конкретной ситуации. У меня webpack, а не gulp, у кого-то grunt. Ставить NVM ради того, чтобы поставить node.js — сомнительное решение. Да, оно вроде даже правильное, но если мне просто нужна нода — так я её просто и поставлю, nvm в общем случае — излишняя прослойка. Ну и ftp в 2016 году.
Оптимизация системы второй раз. И второй раз — ни разу не оптимизация системы.
а: "Удобную работу с терминалом обеспечит Guake" — а еще поставить zsh (fish, кому что), настроить его, да и мне, например, гораздо удобнее пользоваться тайловыми оконными менеджерами, нежели всякими там Guake. Раз на то пошло, то еще можно посоветовать termulator
б: а еще можно посоветовать vim | emacs | что угодно, умеющее раскрашивать и набирать цвет. К слову, как по мне, adobe brackets ныне сдулся и сильно проигрывает VS code и Atom.
в: я понимаю, всякое бывает в жизни, но чем быстрее перейдете от ftp к git и всяким CI, тем раньше выдохнете и жить будет проще. Ни разу не слышал контр-аргумента за исключением сомнительных хостингов.
г. Из 4 пунктов во втором(!) разделе про оптимизацию системы только один пункт про эту самую оптимизацию, да и то сомнительный.
- А где локальный environment? Мне каждый раз ждать, пока загрузятся файлы? А где эм babel? Ладно, я еще могу понять, почему gulp вместо webpack, но в 2016 году без babel как-то как без ног. Где хотя бы Common.js? Что это за фронт-энд разработка, без модулей, без пакетов? Как вам там, в 2002 году живется? (ах да, gulp и sass… в 2009, хорошо. Автопрефексир забыли, к слову).
В результате мы имеем полностью оптимизированную систему, в которой большинство рутинных действий происходит автоматически, не отвлекая нас от восхитительного процесса созидания чего-то нового и интересного.
"Созидание" — наблюдение. Хочу посмотреть на метод разработки через наблюдение.
2PAE
14.10.2016 07:17+1«1) Выбор браузера
2) Установка расширений для Firefox»
Сдаётся мне, что второй пункт исключает первый напрочь. " тут, без сомнения, что-то не так"(С)Джон Сильвер
Noiwex
15.10.2016 00:34+1Лучше получать последний nodejs из репозиториев любымим пакетным менеджером: https://nodejs.org/en/download/package-manager/
Желательно использовать chromium, потому что
а) вебкит
б) react dev tools
с) огромный маркет шейр, а это значит то, что нужно большую часть времени проводить в нём
BUY33
15.10.2016 00:35+1А почему sublime text, а не atom? Почему это он лидер и лучший? Чем так плох хром (или хромиум) по сравнению с ФФ? Вы предлагаете свой зоопарк и кричите, что он лучший и сплошь лидеры, не приводя никаких толковых сравнений альтернатив. Что значит оптимизация в вашем понимании? У вас это скорее набор удобств. Вместо Guake, можно yakuake, если человек в кедах гоняет, а xfce4-terminal говорят годная консоль. В общем однобоко и сплошное ИМХО.
Kaaboeld
15.10.2016 19:52ide: c9
документы: docs.google
бд: firebase
paas: openshift
collobrate: slack
planing: trello
нарезка и просмотр(при необходимости) шаблонов assets.adobe.com и/или его же плагин для brackets
при необходимости заюзать консоль и при наличии chrome — Secure Shell.
oxidmod
так чего такого в хроме нету, что есть в FF? кроме «Мультипроцессорность». не в курсе по правде есть ли чтото такое в хроме.
killmeslow
F12 точно есть =) Видать, автор никогда не юзал хром.
LazyNick7
oxidmodkillmeslow Инструментов в FF гораздо больше. Можно глянуть на главной странице, ссылку я в статье указывал. Чего стоит один только Valence. А их количество больше. Да и если говорить о безопасности информации, Chrome гораздо менее надежен.
Gugic
Есть какие-то подтверждения того что "Chrome гораздо менее надежен" кроме ваших слов?