Gulp.js

В этом посте пойдёт речь о процессах и используемых инструментах для создания SVG спрайтов в студии Liquid Light. Создание и поддержка больших SVG спрайтов может быть сложным делом и времязатратным. Поэтому мы решили автоматизировать процесс. И вместо использования одного большого SVG спрайта и отслеживания координат каждой иконки индивидуально, мы бы хотели иметь возможность редактировать каждую иконку и создавать и размещать сгенерированные иконки автоматически. На практике это значит, что нам нужно сложить все наши SVG иконки в папку и будет создан SVG спрайт (и PNG резерв для IE8) и оптимизирован автоматически вместе с Sass картой или именами и скоординирован. Используя Sass миксины, мы далее сможем включать наши спрайты используя маленькие куски кода: ...

Давайте рассмотрим инструмент для Front-end разработчиков - BrowserSync. Будем использовать его вместе с Gulp.js. Для чего нужен BrowserSync: активной синхронизации - вы прокручиваете, кликаете, обновляете и заполняете формы в различных тестируемых браузерах одновременно; синхронизация кода - браузеры автоматически обновляются с каждым изменением вашего HTML, CSS, изображений и других файлов проекта; легкой интеграции с исполнителями задач, можете использовать существующие Grunt плагины или написать свой; поддержки браузеров - немедленная синхронизация между десктоп, таблет ПК или телефоном, отлично подходит для отзывчивого дизайна; независимый бек-энд - можно использовать с веб-сайтами, которые работают на PHP, ASP, Rails и остальном, а также для просто статических сайтов. запускается везде - построен на Node.js и работает в Windows, MacOS и Linux. Установка меньше, чем за 5 минут. BrowserSync + Gulp.js Нет никакого официального плагина BrowserSync для Gulp, просто потому что он не нужен! Вы просто требуете require модуль и всё, можно использовать API и конфигурировать его с помощью опций. Дальше представлены несколько общих случаев использования, подсмотренных в таких популярных проектах, как Google’s web starter kit и многих других. ...

Откладывайте Grunt в сторону, у нас появился новый исполнитель задач. Gulp - это интуитивная, код-над-конфигурацией, потоковая система сборки. Это факт. Почему мне должно быть интересно? Хороший вопрос. Gulp’s код-над-конфигурацией делает не только лёгким написание задач, но его также легче читать и поддерживать. Gulp использует node.js потоки, что делает быстрее сборку, так как не нужно писать на диск временные папки и файлы. Если вы хотите узнать подробнее о потоках - можете почитать —эту статью. Gulp позволяет вам вводить ваши файл(ы) источники, прокачивать их через множество плагинов и получать вывод в конце, вместо конфигурирования каждого плагина с входом и выходом как в Grunt. Давайте взглянем на характерный пример построения базового Sass в Grunt и в gulp: ...