GULP добро или зло

ключевое слово здесь РЕБЯТА, т.е. команда, и да тогда такая философия и подход приемлемы и даже нужны, любая унификация работы в команде и тем более сформулированная и задокументированная умными дядями - во благо.

т.е. бекендер всегда может попросить верстальщика изменить доработать верстку

И тогда разработчик бекенд никогда и не узнает про GULP, препроцессинг и с чем его едят ибо не его зона ответственности, он видит код он понимает что ему нужно сделать в динамике, а то оставить статику - реально удобно.

И то если инструмент используется умелыми руками, а в моем случае я получил на 5 страниц сайта 17к строк стилей, потому как товарищч вообще не парился и переназначал одинаковые значения для каждого класса. Поверьте, если бы он не слышал про SASS то ему никогда в жизни бы не пришло в голову писать 17к строк(с описанием отдельно каждого угла закругленной кнопки с одинаковыми значениями). Он бы думал головой, и таких верстальщиков я за сегодня реально нагляделся.

---------- Добавлено 06.07.2017 в 22:54 ----------

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

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

Он и не должен уметь работать с frontend, если вы fullstack миритесь и знайте что вам нужно уметь очень многое)

Мало представляю с чем вы столкнулись, но количество строк css и количество страниц не очень правильно мерять, в SPA одна страница, а кода очень много)

Gulp это инструмент для фронтэндеров, созданный фронтэндерами))) Немного сплагиатил с языка R - "R создан статистиками для статистиков", язык достаточно сложный и многие плюется от него не понимая основной концепции, если у вас нет отличных знаний в математике, анализе данных "data sience" то этот язык вам будет сложно даваться, потому что он создан именно для анализа данных и прочих математических развлечений. Тоже самое и с frontend если не занимаетесь профессионально frontend то как вы собираетесь понимать его основные проблемы, решения, практики и т.д.

с таким

https://yadi.sk/i/7izXNUnr3KpXpK

или с таким

https://yadi.sk/i/ULQ5Xfgg3KpXq7

и это еще слабые примеры

вот например стили тега P

https://yadi.sk/i/d-z3A4Jv3KpY2P

element.style {

}

main.css:1

html, body, div, span, h1, h2, h3, h4, h5, h6, p, em, img, strong, sub, sup, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {

    margin: 0;

    padding: 0;

    border: 0;

    outline: 0;

    vertical-align: baseline;

    background: transparent;

    font-size: 100%;

}

libs.min.css:8

*, :after, :before {

    box-sizing: border-box;

}

libs.min.css:8

*, .mfp-container, :after, :before {

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

}

user agent stylesheet

p {

    display: block;

    -webkit-margin-before: 1em;

    -webkit-margin-after: 1em;

    -webkit-margin-start: 0px;

    -webkit-margin-end: 0px;

}

Inherited from li

main.css:644

.bannerMain__advantages ul li, .bannerMain__advantages--extra ul li, .bannerMain__advantages--contacts ul li {

    display: inline-block;

    vertical-align: top;

    font-family: "Roboto-Light";

    font-size: 14px;

    margin-right: 55px;

    margin-top: 20px;

}

main.css:1

html, body, div, span, h1, h2, h3, h4, h5, h6, p, em, img, strong, sub, sup, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {

    margin: 0;

    padding: 0;

    border: 0;

    outline: 0;

    vertical-align: baseline;

    background: transparent;

    font-size: 100%;

}

user agent stylesheet

li {

    display: list-item;

    text-align: -webkit-match-parent;

}

Inherited from ul

main.css:359

ul, ol {

    list-style-type: none;

}

main.css:1

html, body, div, span, h1, h2, h3, h4, h5, h6, p, em, img, strong, sub, sup, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {

    margin: 0;

    padding: 0;

    border: 0;

    outline: 0;

    vertical-align: baseline;

    background: transparent;

    font-size: 100%;

}

user agent stylesheet

ul, menu, dir {

    display: block;

    list-style-type: disc;

    -webkit-margin-before: 1em;

    -webkit-margin-after: 1em;

    -webkit-margin-start: 0px;

    -webkit-margin-end: 0px;

    -webkit-padding-start: 40px;

}

Inherited from div.bannerMain__advantages

main.css:1

html, body, div, span, h1, h2, h3, h4, h5, h6, p, em, img, strong, sub, sup, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {

    margin: 0;

    padding: 0;

    border: 0;

    outline: 0;

    vertical-align: baseline;

    background: transparent;

    font-size: 100%;

}

Inherited from div.container

main.css:1

html, body, div, span, h1, h2, h3, h4, h5, h6, p, em, img, strong, sub, sup, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {

    margin: 0;

    padding: 0;

    border: 0;

    outline: 0;

    vertical-align: baseline;

    background: transparent;

    font-size: 100%;

}

Inherited from div.bannerMain

main.css:1

html, body, div, span, h1, h2, h3, h4, h5, h6, p, em, img, strong, sub, sup, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {

    margin: 0;

    padding: 0;

    border: 0;

    outline: 0;

    vertical-align: baseline;

    background: transparent;

    font-size: 100%;

}

Inherited from div.wrapper

main.css:1

html, body, div, span, h1, h2, h3, h4, h5, h6, p, em, img, strong, sub, sup, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {

    margin: 0;

    padding: 0;

    border: 0;

    outline: 0;

    vertical-align: baseline;

    background: transparent;

    font-size: 100%;

}

Inherited from body

main.css:52

body {

    font-family: 'SegoeUIRegular';

    font-weight: normal;

    text-align: left;

    line-height: 1.4;

    font-size: 13px;

    color: #000;

    position: relative;

    width: 100%;

    height: 100%;

    background: #fff;

}

main.css:1

html, body, div, span, h1, h2, h3, h4, h5, h6, p, em, img, strong, sub, sup, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {

    margin: 0;

    padding: 0;

    border: 0;

    outline: 0;

    vertical-align: baseline;

    background: transparent;

    font-size: 100%;

}

libs.min.css:8

body {

    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;

    font-size: 14px;

    line-height: 1.42857143;

    color: #333;

}

Inherited from html

main.css:1

html, body, div, span, h1, h2, h3, h4, h5, h6, p, em, img, strong, sub, sup, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {

    margin: 0;

    padding: 0;

    border: 0;

    outline: 0;

    vertical-align: baseline;

    background: transparent;

    font-size: 100%;

}

libs.min.css:8

html {

    font-size: 10px;

}

libs.min.css:8

html {

    font-family: sans-serif;

    -ms-text-size-adjust: 100%;

    -webkit-text-size-adjust: 100%;

}

libs.min.css:8

.mfp-arrow, html {

    -webkit-tap-highlight-color: transparent;

}

Pseudo ::before element

libs.min.css:8

*, :after, :before {

    box-sizing: border-box;

}

libs.min.css:8

*, .mfp-container, :after, :before {

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

}

Pseudo ::after element

libs.min.css:8

*, :after, :before {

    box-sizing: border-box;

}

libs.min.css:8

*, .mfp-container, :after, :before {

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

}

и вот хоть убей меня, но я точно знаю, что можно сделать кода меньше

---------- Добавлено 06.07.2017 в 23:28 ----------

я все умею, просто меня жутко парит устанавливать эту фичу к себе на машину вот и весь пердимоноколь)))

Т.е. во мне умирает перфекционист, каждый раз когда сталкиваюсь с новыми инструментами. которые проживают 1-2 года и выкидываются в угоду новому, а те кто ими пользуются за частую так и не становятся гуру в данных инструментах и потому приходится бороться, переделывать, вычищать

Переборщил местами верстальщик, ну я не думаю что это связано с инструментами для css. Я пишу на less, сейчас еще на модульном начал, все достаточно минималистично)

gulp такскраннер

scss препроцессор

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

никто не заставляет придерживаться её

Я скажу просто: "Вы просто не умеете это готовить".

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

Сейчас у верстальщика задача сводится к тому, чтобы переиспользовать свой код, который разбит на блоки и разложен по полочкам, в который очень просто ввнести изменения, и то что раньше занимало неделю, сейчас делается за пару дней, а то что у вас - так это у вас, верстайте сами как вам хочется. А в текущем мире я уже не встречал давно тех, кто руками пишет css, сейчас все современные css фреймворки на миксинах и переменных и можно тянуть то что требуется проекту, а не все подряд что нужно и что нет. И в те ваши 17к строк, зашиты все стили фреймворка, всех плагинов на сайте, и сделал это гулп, а вы руками те жи самые 17к строк подключите 15 файлами в шапке

У этой медали две стороны, не защищая ТС скажу, что вам, например, надо выкопать пару ямок под столбы. Вы можете лопаткой и руками это сделать за пару часов, а можете пригнать автобур на базе трехосного Урала - он эти ямки выроет за 15 минут, они будут ровнее, глубже и вообще красивее.

Но сколько вы этот Урал будете вызванивать, загонять на участок, чтобы ничего не помять и т.п. - не всегда это оправдано.

Но вас устроят и ямки, вырытые лопатой.

Надо знать чёткую грань между тем, когда и какие технологии использовать.

К тому, что вы не знаете тех, кто сейчас не руками верстает - вы один нерепрезентативен. Я, например, если смотреть на моих знакомых, также могу сказать, что серверную часть все на php пишут, но это ведь неправда.

тут есть ещё одна проблема, это не верстальщики и программисты - это подключатели модулей, в подавляющем большинстве случаев они вообще не понимают что именно происходит с кодом и как это работает ;)

ТС врет, все очень современно! Вам просто лень учиться!

#homepage-header-left-top-round-corner .middle-mini-header__right-section

{outline-left: 0px;

outline-right: 0px;

outline-top: 0px;

outline-bottom: 0px;

outline-anywhere-else: 0px;

outline-inside: 0px;}

и т.д...

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

А так-то конечно все надо изучать, и препроцессоры, и генераторы сайтов от Васи Пупкина.