Что нужно автоматизировать в верстке?

Question

Alexander-K @Alexander-K

Что нужно автоматизировать в верстке?

В интернете везде пишут что верстку нужно автоматизировать, использовать Gulp и т.п.
Что можно автоматизировать, верстая простые лендинги из PSD, в которых даже JS не используется? Поможет ли мне Gulp и т.п. ускорить верстку простых лендингов?

Вопрос задан более трёх лет назад
469 просмотров

1 комментарий

Подписаться 2 Простой 1 комментарий

Пригласить эксперта

Ответы на вопрос 2

6 комментариев

profesor08 @profesor08 Куратор тега CSS

webdev341, это уже личные предпочтения. Лично мне gulp перестал быть удобен после некоторого времени.

Написано более трёх лет назад
alex-1917 @alex-1917

да зачем ему такие сложности, эти ребята собирают ленд из готовых HTML-кусков, вот header, а вот conent , в него мы запихнем slider и main, под всем этим оливье добавляем footer - ВСЁ! И картинки уже там вставлены заглушечные...
ХЗ, как тут еще автоматизировать, мне например дольше читать слово JADE, чем склеить 6 кусков кода водин...)))

это верно для случай если тут ТС не лукавит:
верстая простые лендинги

Написано более трёх лет назад
profesor08 @profesor08 Куратор тега CSS

alex-1917, чтоб склеить куски html в любом случае нужно что-то стороннее. ну а на jade свет клином не сошелся, но если нравится писать html теги, это сугубо личное предпочтение. Лично мне проще написать .article вместо того, чтоб писать <div class="article"></div>, более того, мне удобнее сделать миксин с некоторыми параметрами, чтоб выводить множество готовых блоков, без дублирования разметки. При этом мне вообще не надо следить за правильностью закрытия тегов, иногда это бесило.

Написано более трёх лет назад

alex-1917 @alex-1917

profesor08, не, я имел ввиду именно готовые куски кода!!))
путем комбинации блоков на выходе до 1млн вариантов))))
например:

наша команда вариант 23

<section class="bg-gray builder-bg team-style8 padding-110px-tb xs-padding-60px-tb" id="team-section8">
                <div class="container">
                    <div class="row four-column">
                        <!-- team member -->
                        <div class="col-md-3 col-sm-6 col-xs-12 text-center sm-margin-fifteen-bottom">
                            <div class="team position-relative overflow-hidden">
                                <div class="team-img">
                                    <img alt="" src="images/team-08.jpg" data-img-size="(W)750px X (H)893px">
                                </div>
                                <div class="team-details bg-white builder-bg text-center">
                                    <div class="team-name padding-twenty no-padding-lr">
                                        <span class="alt-font text-dark-gray tz-text font-weight-500">ANDREW LUPKIN</span>
                                        <span class="text-extra-small alt-font display-block tz-text">DEVELOPER HEAD</span>
                                    </div>
                                </div>
                            </div>
                            <div class="team-content social-icon-color padding-twenty no-padding-lr no-padding-bottom xs-padding-eleven-top">
                                <div class="display-inline-block margin-seven no-margin-tb"><a href="#"><i class="fa ti-facebook icon-extra-small tz-icon-color"></i></a></div>
                                <div class="display-inline-block margin-seven no-margin-tb"><a href="#"><i class="fa ti-twitter-alt icon-extra-small tz-icon-color"></i></a></div>
                                <div class="display-inline-block margin-seven no-margin-tb"><a href="#"><i class="fa ti-linkedin icon-extra-small tz-icon-color"></i></a></div>
                                <div class="display-inline-block margin-seven no-margin-tb"><a href="#"><i class="fa ti-pinterest icon-extra-small tz-icon-color"></i></a></div>
                            </div>
                        </div>
                        <!-- end team member -->
                        <!-- team member -->
                        <div class="col-md-3 col-sm-6 col-xs-12 text-center sm-margin-fifteen-bottom">
                            <div class="team position-relative overflow-hidden">
                                <div class="team-img">
                                    <img alt="" src="images/team-01.jpg" data-img-size="(W)750px X (H)893px">
                                </div>
                                <div class="team-details bg-white builder-bg text-center">
                                    <div class="team-name padding-twenty no-padding-lr">
                                        <span class="alt-font text-dark-gray tz-text font-weight-500">SARA SMITH</span>
                                        <span class="text-extra-small alt-font display-block tz-text">FOUNDER AND CEO</span>
                                    </div>
                                </div>
                            </div>
                            <div class="team-content social-icon-color padding-twenty no-padding-lr no-padding-bottom xs-padding-eleven-top">
                                <div class="display-inline-block margin-seven no-margin-tb"><a href="#"><i class="fa ti-facebook icon-extra-small tz-icon-color"></i></a></div>
                                <div class="display-inline-block margin-seven no-margin-tb"><a href="#"><i class="fa ti-twitter-alt icon-extra-small tz-icon-color"></i></a></div>
                                <div class="display-inline-block margin-seven no-margin-tb"><a href="#"><i class="fa ti-linkedin icon-extra-small tz-icon-color"></i></a></div>
                                <div class="display-inline-block margin-seven no-margin-tb"><a href="#"><i class="fa ti-pinterest icon-extra-small tz-icon-color"></i></a></div>
                            </div>
                        </div>
                        <!-- end team member -->
                        <!-- team member -->
                        <div class="col-md-3 col-sm-6 col-xs-12 text-center xs-margin-fifteen-bottom">
                            <div class="team position-relative overflow-hidden">
                                <div class="team-img">
                                    <img alt="" src="images/team-02.jpg" data-img-size="(W)750px X (H)893px">
                                </div>
                                <div class="team-details bg-white builder-bg text-center">
                                    <div class="team-name padding-twenty no-padding-lr">
                                        <span class="alt-font text-dark-gray tz-text font-weight-500">SOMMER CHRISTIAN</span>
                                        <span class="text-extra-small alt-font display-block tz-text">CREATIVE DIRECTOR</span>
                                    </div>
                                </div>
                            </div>
                            <div class="team-content social-icon-color padding-twenty no-padding-lr no-padding-bottom xs-padding-eleven-top">
                                <div class="display-inline-block margin-seven no-margin-tb"><a href="#"><i class="fa ti-facebook icon-extra-small tz-icon-color"></i></a></div>
                                <div class="display-inline-block margin-seven no-margin-tb"><a href="#"><i class="fa ti-twitter-alt icon-extra-small tz-icon-color"></i></a></div>
                                <div class="display-inline-block margin-seven no-margin-tb"><a href="#"><i class="fa ti-linkedin icon-extra-small tz-icon-color"></i></a></div>
                                <div class="display-inline-block margin-seven no-margin-tb"><a href="#"><i class="fa ti-pinterest icon-extra-small tz-icon-color"></i></a></div>
                            </div>
                        </div>
                        <!-- end team member -->
                        <!-- team member -->
                        <div class="col-md-3 col-sm-6 col-xs-12 text-center">
                            <div class="team position-relative overflow-hidden">
                                <div class="team-img">
                                    <img alt="" src="images/team-03.jpg" data-img-size="(W)750px X (H)893px">
                                </div>
                                <div class="team-details bg-white builder-bg text-center">
                                    <div class="team-name padding-twenty no-padding-lr">
                                        <span class="alt-font text-dark-gray tz-text font-weight-500">ANDREW LUPKIN</span>
                                        <span class="text-extra-small alt-font display-block tz-text">DEVELOPER HEAD</span>
                                    </div>
                                </div>
                            </div>
                            <div class="team-content social-icon-color padding-twenty no-padding-lr no-padding-bottom xs-padding-eleven-top">
                                <div class="display-inline-block margin-seven no-margin-tb"><a href="#"><i class="fa ti-facebook icon-extra-small tz-icon-color"></i></a></div>
                                <div class="display-inline-block margin-seven no-margin-tb"><a href="#"><i class="fa ti-twitter-alt icon-extra-small tz-icon-color"></i></a></div>
                                <div class="display-inline-block margin-seven no-margin-tb"><a href="#"><i class="fa ti-linkedin icon-extra-small tz-icon-color"></i></a></div>
                                <div class="display-inline-block margin-seven no-margin-tb"><a href="#"><i class="fa ti-pinterest icon-extra-small tz-icon-color"></i></a></div>
                            </div>
                        </div>
                        <!-- end team member -->
                    </div>
                </div>
            </section>

Написано более трёх лет назад

alex-1917 @alex-1917

блок с подпиской 74

<section class="bg-deep-blue builder-bg border-none" id="subscribe-section8">
                <div class="container-fluid">
                    <div class="row equalize">
                        <div class="col-lg-7 col-md-6 col-sm-12 col-xs-12 tz-builder-bg-image cover-background sm-height-600-px xs-height-400-px" data-img-size="(W)1200px X (H)760px" style="background:linear-gradient(rgba(0,0,0,0.01), rgba(0,0,0,0.01)), url('images/bg-image/hero-bg32.jpg')"></div>
                        <div class="col-lg-5 col-md-6 col-sm-12 col-xs-12 display-table">
                            <div class="display-table-cell-vertical-middle padding-twenty-nine sm-padding-fifteen xs-no-padding-lr">
                                <h2 class="title-extra-large alt-font xs-title-extra-large-2 text-white margin-six-bottom tz-text">Get started free trial!</h2>
                                <div class="text-large sm-text-extra-large text-white width-90 xs-width-100 margin-twelve-bottom tz-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum standard dummy text.</div>
                                <div class="display-block width-90 xs-width-100">
                                    <form action="javascript:void(0)" method="post">
                                        <input type="text" name="name" id="name" data-email="required" placeholder="Your Name" class="big-input bg-light-gray alt-font border-radius-4">
                                        <input type="text" name="email" id="email" data-email="required" placeholder="Your Email" class="big-input bg-light-gray alt-font border-radius-4">
                                        <button type="submit" class="contact-submit btn btn-large propClone bg-golden-yellow text-dark-gray builder-bg tz-text">START YOUR TRIAL</button>                                                    
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

Написано более трёх лет назад

Alexander-K @Alexander-K Автор вопроса

alex-1917, Каким образом склеиваются куски кода?
Через Ctrl+C / Ctrl+V ? Или есть более быстрые/удобные вещи?

Написано более трёх лет назад

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- 11 часов назад
- 28 просмотров
0

ответов
CSS

Простой
Не работает скролл на фоне блока. Как исправить?
- 1 подписчик
- 12 часов назад
- 27 просмотров
1

ответ
HTML

+1 ещё

Простой
Как поместить картинку рядом с текстом?
- 1 подписчик
- 15 часов назад
- 63 просмотра
1

ответ
CSS

Простой
Как выровнять по высоте заголовки в карточках товаров?
- 1 подписчик
- 19 часов назад
- 72 просмотра
3

ответа
Веб-разработка

Простой
Как сделать чтобы при нажатии на кнопку или сылку в div блоке открывалась галерея?
- 1 подписчик
- 20 часов назад
- 28 просмотров
0

ответов
HTML

+1 ещё

Средний
Как в файле svg заставить работать события?
- 3 подписчика
- 23 часа назад
- 663 просмотра
2

ответа
CSS

Средний
Почему у элемента такое поведение?
- 4 подписчика
- вчера
- 1952 просмотра
0

ответов
CSS

Простой
Почему не работает transition свойство в scss файле через webpack?
- 1 подписчик
- вчера
- 61 просмотр
2

ответа
HTML

+1 ещё

Простой
Почему верхние и нижние внешние отступы пустого блока не схлопываются?
- 2 подписчика
- вчера
- 202 просмотра
4

ответа
CSS

Простой
Почему нет задержки между повторами анимации?
- 1 подписчик
- вчера
- 60 просмотров
1

ответ
Показать ещё Загружается…

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Сделать сайт на Python Django

24 апр. 2024, в 10:32

400000 руб./за проект

Арбитраж Трафика в тгк

24 апр. 2024, в 10:12

10000 руб./за проект

Развернуть болванку мултиплеерной игры unity на сервере

24 апр. 2024, в 09:59

5000 руб./за проект

Answer 1 · 2018-09-15 14:48:44

Например можешь писать не на CSS, а на SCSS, гораздо удобнее. Вместо HTML использовать JADE, гораздо удобнее и компактнее. Автоматическая компиляция всего этого в html, css соответственно, минификация. Так-же оптимизация изображений. Все это делать в ручную это неудобно. Да и вообще куча удобных плюшек, про F5 можно забыть. Попробуй и сам поймешь, что тебе удобнее, а потом может и webpack захочешь потискать.

Answer 2 · 2018-09-15 15:09:09

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

В твоем арсенале может быть:

browsersync - при любых изменениях в файлах, страница с проектом в браузере будет автоматически обновляться;
autoprefixer - ну, тут понятно;
препроцессоры (SCSS, LESS и т.д.) - тебе не нужно будет отдельно запускать программы типа Koala и т.д.;
минификация JS и CSS - это будет делаться автоматически.

Перечислять можно много чего

Попробуй OptimizedHTML, где по умолчанию уже много чего есть внутри

Что нужно автоматизировать в верстке?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт