Как ускорить вёрстку?

Question

[colorkid]

Всем привет. Тут такое дело, ожидается поток проектов под вёрстку + немного js. Вопрос, как максимально ускорить процесс? Какие либо, фреймворк использовать? Проекты типа несложные но уникальные сайты от лэндингов до инет магазинов.

Comments

[Александр Пеньшин]

bootstrap, emmet, снипеты, less

[Максим Павлов]

pug, gulp для сборки

Answer 1

[Артур Карапетян]

1) SASS и сетку для него(типа bootstrap)
2) GULP для компиляции , а также его LiveReload и AutoPrefixer, и BrowserSync с его локальным сервером, и Bower (закачка либ)
3) GIT
4) Emmet
5) BEM (БЭМ)
6) Используйте gist от github
Ну и прямые руки

Comments

[Иван]

Извиняюсь, а разве livereload и BrowserSync не выполняют те же функции?То есть перезагрузка экрана,после сохранения файла,не?

[Нурлан]

Иван: С помощью BrowserSync можно будет тестировать верстку сразу в нескольких браузерах.

[Александр Владимирович]

nugig: Что плохого в использовании Bower?

[nugig]

Александр Владимирович: на их сайт давно заходил?

...psst! While Bower is maintained, we recommend yarn and webpack for new front-end projects!

[nugig]

Вкратце - в нем плохо все! Хуже Bower наверное только Yeoman в рейтинге дебильности и бесполезности.

[Александр Владимирович]

nugig: Да, давно не заходил, всегда ставил bower из консоли. Как сейчас жить дальше, опять проблема выбора

[Андрей Саныч]

Александр Владимирович: npm, yarn

[Иван]

Андрей Саныч: а чем bower не актуален?Объясните,пожалуйста.

[Андрей Саныч]

Иван: зайдите на сайт bower-a и белым по синему будет написано почему =)

[Иван]

Андрей Саныч: а..извиняюсь,увидел:) я только освоил немного bower, не подскажите,npm умеет всё то что же самое как и bower?

[Андрей Саныч]

Иван: да, в принципе, в npm есть все те же пакеты, что и в bower. Я тоже любил bower... но нужно с него сваливать...

[Андрей Саныч]

Иван: лучше посмотрите в сторону yarn. Это по сути тот же npm, только быстрее и функциональнее. А также у него есть lock файл на подобии composer.lock, который в себе хранит точные версии пакетов

[Иван]

Андрей Саныч: благодарю:)

[Chilace]

Андрей Саныч: Последний npm (npm 5) вполне может конкурировать с yarn - появился lock файл, в разы увеличилась скорость. Правда пока есть баги, но это - детские болезни.
https://habrahabr.ru/post/329942/

[Иван]

Chilace: а можно ли с помощью него библиотеки устаналивать в разные папки?Автоматически,как было у бовера,а не в ноде-мудль

[Chilace]

Иван: Вообще-то я не прогер и в этой теме оказался случайно - мимо проходил. Но если погуглить, то можно увидеть что node_modules в npm - это та же bower_components в bower и единственная разница между bower и npm на данный момент - это возможность bower'a устанавливать зависимости в произвольную папку, а не в bower_components.

Answer 2

[Bastax13]

Как минимум - использовать SASS.
Как максимум - пригласить еще несколько человек и использовать SASS.

Answer 3

[taki154]

Для быстрой и оперативной верстки использую gulp с плагинами и препроцессорными плюшками:

- jade (сейчас больше известен как pug) - html-шаблонизатор, синтаксис простой и понятный, поддерживает циклы, инклюды, примеси, переменные, условия и пр. использую как препроцессор и из него генерирую статичные страницы, верстаю в нем.
- less - тут даже говорить нечего, любой css-препроцессор для разработки и скорости при умелом использовании подойдет лучше писанины на нативном css;
- далее, до кучи всякие автопрефиксеры, минификаторы, лайврелоды, браузерсинк и прочее.

ВАЖНО: если вы никогда не работали в среде npm, для легкого и понятного старта вы можете воспользоваться сервисом quenchjs.com, который сделает всю грязную работу за вас. Там есть конфигуратор, выбираете что надо и качаете архив. Ставите себе node.js, и дальше в папке, куда распаковали архив из командной строки- npm install. После того, как все пакеты будут установлены, перезапускаете в этой же папке терминал и пишите волшебную команду "gulp". И будет вам счастье. Это если совсем в двух словах. Поверьте, все это перевернет ваш опыт верстальщика и поднимет скиллы на новый уровень! Дерзайте! :)

Comments

[taki154]

из того, что действительно важно выбрать в конфигурации quench - лайврелод, браузерсинк, джейж (паг) ну и цсс-препроцессор. эти штуки (при возможности денек посмотреть одним глазом в доку) уже на сл день дадут вам крутой выхлоп. :)

[OGuman]

taki154, А чем jade ускоряет? В чем смысл? Есть ведь Emmet а переменные всякие врядле нужны.

Answer 4

[Николай]

Если у вас ещё нет - то обязательно создать (или использовать готовый, например html5 Boilerplate) стартовый шаблон под вёрстку, где включены все используемые вами решения (пример).
Ну и как уже писали выше - пользоваться SASS, GULP.
Из фреймворков - пользоваться теми, что знаете.

Answer 5

[Александр Белькевич]

Ускорить верстку - избавиться от ФШ и пользоваться Avocode) Верстка пойдет быстрее))

Comments

[AlexNab]

zeplin получше будет

[AlexNab]

Поудобнее

[AlexNab]

+ бесплатный

[Александр Белькевич]

AlexNab: Я не разобрался, как там картинки сохранять из макета PSD O_o

[Swartex]

я не пойму Avocode бесплатен что ли?
Знаю zeplin точно платный

[Александр Белькевич]

Swartex: Первый месяц только бесплатный. А так 8$ в месяц вроде. Но он себя окупает)

[vldby]

Александр Белькевич: Не месяц, а 14 дней. Но никто не мешает просто регистрировать новый аккаунт.

[Александр Белькевич]

vldby: Я думаю, что если вы серьезно занимаетесь разработкой, то не очень честно каждый раз регистрировать новый акк каждый раз. Неужели 500р такая неподъемная сумма?

[vldby]

Александр Белькевич: можно подумать все рождаются серьёзными разработчиками. Начинать-то с чего-то нужно. А когда первая з/п появится, тогда можно покупать всё от Windows до WinRAR :)

[Александр Белькевич]

vldby: Надо уважать чужой труд. Особенно если инструмент помогает и приносит прибыль. Проработав 14 дней и поняв, что данное ПО помогает в решении задач (я думаю, что раз важна скорость работы, то значит на проектах зарабатываются деньги), нужно не жлобиться и не делать из себя жида. К тому же цена очень демократичная

[Виолетта Морозова]

Авокадо действительно годный инструмент, только вот они стали сжимать графику при экспорте. Но для верстки думаю не критично. В идеале дизайнер сам должен к макету прилагать необходимые иконки и фотографии в хорошем качестве, чтобы макеты долго не грузились и пр. Так что, для меня графика не главное. Да и я уверена, что пофиксят скоро. Они постоянно развиваются.
И да, те кто оценивал авокадо хотя бы пол года назад и не оценил, предлагаю еще раз на него взглянуть. Мне думается проект очень нехило вырос.

Для тех кто зарабатывает на верстке действительно не проблематично платить по 500р, единственное нужно учитывать, что это все таки не единственные траты в жизни человека, но зато приносящие деньги.
Если ты бедный студент без постоянной работы, то конечно же сложно каждый месяц стабильно к определенному числу доставать даже 500р. Никогда не понимала когда говорят: "те чо сложно 500р заплатить?!!" не считайте чужие деньги, товарищи. Это ж неэтично =)

[Андрей Прозоров]

пользовался авокодом и ФШ с плагинами/собствтенными примочками. Однозначно ФШ. да проблемма что надо настривать устанавливать и так далее в него всякую всячину. Но я могу его конфигурирвать под себя. могу создавать любые пакетные задачи. а в авокоде просто есть заданный функционал и все тут. Если бы я не умел конфигурировать ФШ то выбрал бы авокод. а так ФШ!

Answer 6

[Максим Кудрявцев]

Смотря под какой движок/CMS Вы там верстайте. Универсальные инструменты вроде Gulp/Sass и т.п. Вам предложили выше. Из чего-то специфичного в духе "Пришло 50 проектов от индусов, надо сделать срочно" - смотри в сторону Divi Builder от Elegantthemes или чего-то подобного.

Answer 7

[bro-dev]

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

Answer 8

[pavel null]

я бы добавил brackets.io

Comments

[pavel null]

вопрос как бы намекает =)
держись, без идиотов будет скучно

Answer 9

[facemoroz]

Я использую скрипт для загрузки макета в формате .png в html, он центрует картинку по центру, задаю прозрачность и верстаю по нему, бегаю в фотошоп только тогда, когда нужно узнать размер шрифта или экспортировать картинку, увеличивает скорость в 3 раза.

Естественно использую совместно с Browser Sync.
lobanof.ru/sposob-uskorit-verstku