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

Question

[Alexander-K]

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

Comments

[alex-1917]

не поможет

Answer 1

[profesor08]

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

Comments

[profesor08]

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

[alex-1917]

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

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

верстая простые лендинги

[profesor08]

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

[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]

блок с подпиской 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]

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

Answer 2

[uRoot]

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

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

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

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

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