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

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

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

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

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


  1. Выбор браузера
  2. Установка расширений для Firefox
  3. Выбор текстового редактора
  4. Необходимые расширения для Sublime Text 3
  5. Дополнительные инструменты и оптимизация системы

Большинство хороших программистов делают свою работу не потому, что ожидают оплаты или признания, а потому что получают удовольствие от программирования.
— 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 ниже:

Мой 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 предоставляю вам, я же использую оба инструмента по мере надобности

Результат


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

Похожие публикации

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама

Комментарии 37

    +5
    так чего такого в хроме нету, что есть в FF? кроме «Мультипроцессорность». не в курсе по правде есть ли чтото такое в хроме.
      0
      F12 точно есть =) Видать, автор никогда не юзал хром.
        –1
        oxidmodkillmeslow Инструментов в FF гораздо больше. Можно глянуть на главной странице, ссылку я в статье указывал. Чего стоит один только Valence. А их количество больше. Да и если говорить о безопасности информации, Chrome гораздо менее надежен.
          0

          Есть какие-то подтверждения того что "Chrome гораздо менее надежен" кроме ваших слов?

      0
      Чем заменили Фотошоп?
        0
        А видеоредакторы вас не интересуют?
          0
          Каким образом Видеоредакторы причастны к front-end разработке?
          0
          Avocado для готовых PSD. Или вы имеете в виду само создание шаблонов?
            0
            нарезку на изображеня и вектор
              0
                0
                спасибо! Будем пробовать!
            0
            Avocode, вроде как им удобно выдирать стили из PSD. Есть на Windows. Мне не понравился, фотошоп с CSS Hat делает то же самое. Но может я не просек фишку.
              0
              Из средств, которые доступны на Linux — Avocode один из самых доступных и удобных.
            +4
            Редактор кода, sftp, avocode, это всё прекрасно. Простите, а вы уверены что ваш инструментарий сильно изменится, будь он на какой то другой системе?
            Окей, на винде нет удобной встроенной консоли для игр с npm, так же как на linux нет нативного фотошопа. Но, хочу заметить, обе эти проблемы легко решаются. В маке же есть и то и другое.
            Поймите меня правильно, я просто не понял в чём профит конкретно linux в конкретной статье.
              0
              Вынужденно переехал на windows. Вместо guake использую ConEmu — замена более чем адекватная
                0
                Статья не про сравнение операционных систем, а про организацию рабочего окружения конкретно на Linux.
                  0
                  Вот именно в этом месте у меня и вопросы. Вчитайтесь что написано:
                  1. Скачать firefox
                  2. Скачать плагины для firefox
                  3. Скачать avacode
                  4. Установить саблайм
                  5. Накатить модулей на саблайм
                  6. Установить npm

                  С первого по пятый пункт можно проделать аналогично на любой системе. С 6-м пунктом можно справиться упомянутым выше ConEmu. Так и причем тут linux? На мой взгляд, разница только в том, как вы photoshop ставить будете. Тем более человек на sftp через gui ходит, был ли смысл такого перехода?
                    0
                    Так и причем тут linux?

                    Как минимум тем, что мы ограничены множеством софта, которое актуально для Linux.

                    был ли смысл такого перехода?

                    Переход и его смысл в статье не обсуждается.
                    Представьте, что вы безумно любите Linux, но деньги зарабатывать умеете только в веб-фронт. А уж за что любить Linux и какой в этом смысл — пол-Хабра статей.
                      0
                      Именно! Спасибо)
                      0
                      По собственному выбору не нужно судить других. У linux большой потенциал, именно поэтому его встраивают в windows, так что под чем разрабатывать это уже дело каждого. Как по мне, так статья годная, в особенности для новичков.Сам не так давно на лине сижу, и хотелось бы что бы виртуалка была менее лагучая, а я не знал, точнее мне не приходило в голову что есть такого рода проги «zRam».
                  +1

                  По какой-то непонятной причине FF при включенных developer tools у меня работает в целом ощутимо медленнее чем chromium. Не знаю с чем это связано, но вот как-то так.

                  • НЛО прилетело и опубликовало эту надпись здесь
                      +3
                      Полностью бесплатен
                      Мы же стремимся к свободе программного обеспечения, верно? Да и зачем переплачивать за некоторые вещи, если мы имеем достойную бесплатную альтернативу?!

                      Научились бы различать бесплатное и свободное. Это две большие разницы, да.

                        +5

                        Особо эпично в данном контексте выглядит дальнейшая агитация за несвободный и небесплатный sublime text.

                          +1
                          Лучше vim/emacs.
                            0

                            Здесь на вкус и цвет. Кому vim, кому emacs, кому atom, кому webstorm =)

                            0
                            Меня это тоже удивило
                            0
                            А чем отличается платная и бесплатная версия Sublime?
                              0
                              Все, вопрос понял и принял. Ошибка, каюсь.
                              +1

                              Сорвали комментарий с уст. Еще зацепил "Функционал". И закопайте уже стюардессу/ftp.


                              nvm правда нужен для установленного в итоге глобально gulp?


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

                              Rly?

                              0
                              Что принципиально изменится если заменить текстовый редактор на Geany || Kdevelop || Vim || Emacs и т.д.?
                                +5
                                1. "Инструменты фронт-энд разработки под линукс". И ставим только ff. Фронт-энд разработчик. Я что-то не понимаю? У меня одновременно стоят штук 5 браузеров, еще android и window в виртуалках (если говорить про линукс, то +1 виртуалка с macOS). Мало того, что то, что одно работает в ff еще не говорит, что оно заработает в хроме, так на других ОС вообще всплывать камни могут просто неожиданные (например, отказ грузить виндой не патченные ttf шрифты или лаги сафари если на странице много элементов с filter: blur, у которых забыли проставить какой-либо стиль, чтобы блок рисовался через видеокарту. Да, странная ошибка, но она есть).
                                  Про плагины уже молчу. Каждый выбирает набор себе сам, тут вообще очень скромный. К слову, что хром, что ff умеет подставлять другой юзерагент из коробки из девтулз, зачем для этого еще свой плагин ставить? И, субъективно, в хроме dev tools удобнее, не считая возможности отладки шейдеров у ff.


                                2. Редактор. Во-первых, sublime text не открытый и не бесплатный. Во-вторых, почему именно он? Освойте vim и будет вам счастье, если хочется гибкости. Если хочется функционала — WebStorm. Опять же — кому что удобно. И, кто бы сколько не спорил, на linux уметь пользоваться вимом полезно, пусть он и не основной редактор.


                                3. Оптимизация системы. Тут больше пунктов, которые… скажем так, выбираются из конкретной ситуации. У меня webpack, а не gulp, у кого-то grunt. Ставить NVM ради того, чтобы поставить node.js — сомнительное решение. Да, оно вроде даже правильное, но если мне просто нужна нода — так я её просто и поставлю, nvm в общем случае — излишняя прослойка. Ну и ftp в 2016 году.


                                4. Оптимизация системы второй раз. И второй раз — ни разу не оптимизация системы.
                                  а: "Удобную работу с терминалом обеспечит Guake" — а еще поставить zsh (fish, кому что), настроить его, да и мне, например, гораздо удобнее пользоваться тайловыми оконными менеджерами, нежели всякими там Guake. Раз на то пошло, то еще можно посоветовать termulator
                                  б: а еще можно посоветовать vim | emacs | что угодно, умеющее раскрашивать и набирать цвет. К слову, как по мне, adobe brackets ныне сдулся и сильно проигрывает VS code и Atom.
                                  в: я понимаю, всякое бывает в жизни, но чем быстрее перейдете от ftp к git и всяким CI, тем раньше выдохнете и жить будет проще. Ни разу не слышал контр-аргумента за исключением сомнительных хостингов.
                                  г. Из 4 пунктов во втором(!) разделе про оптимизацию системы только один пункт про эту самую оптимизацию, да и то сомнительный.


                                5. А где локальный environment? Мне каждый раз ждать, пока загрузятся файлы? А где эм babel? Ладно, я еще могу понять, почему gulp вместо webpack, но в 2016 году без babel как-то как без ног. Где хотя бы Common.js? Что это за фронт-энд разработка, без модулей, без пакетов? Как вам там, в 2002 году живется? (ах да, gulp и sass… в 2009, хорошо. Автопрефексир забыли, к слову).

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

                                "Созидание" — наблюдение. Хочу посмотреть на метод разработки через наблюдение.

                                  +1
                                  «1) Выбор браузера
                                  2) Установка расширений для Firefox»

                                  Сдаётся мне, что второй пункт исключает первый напрочь. " тут, без сомнения, что-то не так"(С)Джон Сильвер
                                    +1
                                    Лучше получать последний nodejs из репозиториев любымим пакетным менеджером: https://nodejs.org/en/download/package-manager/

                                    Желательно использовать chromium, потому что
                                    а) вебкит
                                    б) react dev tools
                                    с) огромный маркет шейр, а это значит то, что нужно большую часть времени проводить в нём
                                      +1
                                      А почему sublime text, а не atom? Почему это он лидер и лучший? Чем так плох хром (или хромиум) по сравнению с ФФ? Вы предлагаете свой зоопарк и кричите, что он лучший и сплошь лидеры, не приводя никаких толковых сравнений альтернатив. Что значит оптимизация в вашем понимании? У вас это скорее набор удобств. Вместо Guake, можно yakuake, если человек в кедах гоняет, а xfce4-terminal говорят годная консоль. В общем однобоко и сплошное ИМХО.
                                        0
                                        ide: c9
                                        документы: docs.google
                                        бд: firebase
                                        paas: openshift
                                        collobrate: slack
                                        planing: trello
                                        нарезка и просмотр(при необходимости) шаблонов assets.adobe.com и/или его же плагин для brackets
                                        при необходимости заюзать консоль и при наличии chrome — Secure Shell.
                                          0
                                          В чем превосходство Package Control над инструментами других редакторов? В том же бесплатном Атоме есть все перечисленные плагины.

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

                                          Самое читаемое