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

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

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

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

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

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

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

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

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

Плюсы

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

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

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

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

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

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

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

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

Pixel Perfect ^[7]

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

Advanced Cookie Manager ^[8]

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

User-Agent Switcher ^[9]

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

User-Agent Switcher ^[10]

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

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

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

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

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

Emmet ^[13] и Emmet Css Snippets ^[14]

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

Color Highlighter ^[16]

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

SASS ^[17]

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

SFTP ^[18]

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

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

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

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

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

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

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

Устанавливаем NVM ^[23] — это менеджер версий 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 ^[24] или zSwap.
• Удобную работу с терминалом обеспечит Guake ^[25]
• Вместо Sublime и Avocode можно использовать Adobe Brackets ^[26] с его встроенным Extract, но, говоря честно, поддержка шрифтов в Debian и Ubuntu оставляет желать лучшего.
• Выбор между SFTP и VinylFTP предоставляю вам, я же использую оба инструмента по мере надобности

Результат

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

Автор: LazyNick7

Источник ^[27]