Когда изучать npm, grunt, bower, git и т.д?

Question

[Ivan-P]

Добрый день.
Знаю HTML, CSS, LESS (верстаю для тренировок шаблоны), изучаю JavaScript(learn.javascript.ru, книги O'Really).
Первую верстку вообще писал просто в Блокноте, потом перешел на Notepade++, сейчас верстаю в Sublime Text. Компиляцию LESS провожу через WinLESS.
Но чем больше читаю всяких статей, тем больше натыкаюсь на такие термины как npm, grunt, bower, git...(кажется их легион), путаюсь в терминах, ищу про один инструмент, натыкаюсь на другой, забываю что вообще искал, руки опускаются...
Как часто вообще используются данные инструменты в веб-разработке, примут ли меня без их знания на первую работу, или не стоит распылятся и шлифовать связку HTML-CSS-JS до посинения при помощи Sublime Text+WinLESS, а npm, grunt, bower, git и т.д отложить на далекое будущее?
Спасибо.

Comments

[Дмитрий Гавриленко]

Да, про Git тоже хотелось бы узнать.

Answer 1

[Александр Флоринский]

На самом деле все очень просто.
NPM - это пакетный менеджер который идет вместе с node.js, С помошью него можно устанавливать все что вы перечислили выше и другие модули, программы.

Gulp, Grunt - это консольные утилиты. Они взаимозаменяемы. Они делают рутинную работу за тебя: компилируют Less Sass, склеивают скрипты, минифицируют скрипты, стили, делают спрайты, оптимизируют картинки и даже поднимают свой простенький вебсервер и LiveReload.

Gulp или Grunt - Дело вкуса. Мне понравился больше Gulp. Он быстрее.

Git - Система контроля версий твоего кода. Она позволяет организовать совместную работу нескольких разработчиков над ним проектом.

Bower - просто утилита, которая быстро тебе скачивает необходимые библиотеки и из хависимости. Что бы ты не лазил по сайтам разработчиков. Например тебе надо установить jquery - ты просто в консоли пишешь Bower install jquery и тебе скачивается Jquery.

Я считаю что Git в современной работе просто необходим как воздух.
Gulp или Grunt и Bower сильно облегчили мне жизнь.

Думаю что для устроиства на работу ключевым знанием будет Git. а потом уже все остальное.

Gulp или Grunt и Bower - очень легкие программы для первичного использования. Их Можно попробовать и решить нужны ли они тебе или нет - за очень короткий промежуток времени.

Comments

[Георгий Григорьев]

а еще gulp умеет параллельно

Answer 2

[Константин Китманов]

npm/bower упрощают установку сторонних библиотек. Чтобы ходить по сайтам и скачивать jQuery, jQueryUI, Bootstrap и т.д., все это ставится одной командой.

grunt/gulp -- таскраннеры, позволяют организовать хитрую компиляцию/склейку файлов/минификацию и прочее, что может понадобиться фронтендеру. Во-первых, это не только LESS, но еще миллион всяких вещей, во-вторых, это настраивается на проект и один раз (то есть не надо каждому разрабу ставить WinLESS и настраивать его).

git/mercurial/svn -- система контроля версий. В команде без этого никуда (и никто за вас не будет коммитить код), но и при одиночной разработке есть профит.

Answer 3

[Ленар Фаттахов]

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

Answer 4

[IceJOKER]

Не надо все и сразу изучать - забудете нахрен все или будете путаться.
npm, bower - только пару команд нужно знать,
git - также нужно знать несколько команд и принцип работы.
grunt - также.
То есть имею в виду, что не нужно пытаться изучать все команды, 80% из них среднему программисту не нужны и тем более в начале.
С практикой и с опытом все встанет на свои места, изучаете одно, другое, третье и не забываете практиковаться, чтоб закреплять изученное, так и двигаетесь..
Все выше описанные инструменты - это всего лишь средства-помощники для программиста или просто хорошие друзья ). Это инструменты без которых можно обойтись, но с которыми жить становится легче ))

Более чем согласен с Ленар Фаттахов

Answer 5

[Александр]

npm, grunt, bower, git - важные и связанные между собой технологии. Советую их изучить.
Коротко:
npm - менеджер пакетов для nodejs. Через него ставятся grunt и bower.
grunt - собирает front-end: будет за вас less -> css перегонять.
bower - менеджер javascript пакетов
git - система контроля версий, каждому разработчику знать и использовать обязательно. С помощью git'a вышеупомянутые библиотеки и скачивают пакеты, например с github.

Comments

[Kir ---]

git - популярное говно, которое должно сгнить в виду того что оно сделано отвратительно и не согласовано
хайль Mercurial

[Александр]

в своем ответе я имел ввиду что разработчику необходимо знать и уметь пользоваться любой системой контроля версий, будь то git, hg, svn или bazaar.
Разжигать холивар git vs hg даже не собирался.

[raiboon]

Александр: Вот не надо здесь про svn

[bit_rainbow]

Kir ---: пруфы. обычно такое про гит гововят некрофилы SVNищики

[Kir ---]

bit_rainbow:
>git branch -a
>git tag -a "Весь GIT в подобном дерьме! Всё не согласовано!"

А ещё эта упоротая система контроля версий не хранит в коммите информацию о ветке в котором он был сделан, поэтому во всех репозиториях в комментариях пишут^
>git commit -m "#MY_BRANCH_TASK: Поправил вафли"

Answer 6

[Юнус Газиев]

Вчера

Answer 7

[Георгий Григорьев]

Если работаешь под вендою, то поставь nodejs, хотя бы для компиляции less (я приведу пример установки через chocolatey)

chocolatey install nodejs
npm install -g less

Первая ставит саму ноду (можно поставить руками с оффсайта), ставить обязательно, есть не просит и не кусается. Даже великая и ужасная Visual Studio юзает ноду (точнее майкрософтоский web essential). Вторая команда запускает менеджер пакетов npm для установки глобально модуля less.

Когда поставишь less. Можешь компилировать свой less следующей командой:
lessc myless.less myless.cs

А скомпилировать и минифицировать сразу
lessc -x myless.less myless.min.css

git- средство контроля версий. Сделай учетку на битбакете - 5 приватных репозиториев, и не надо парится что твои эксперименты (не факт что они будут хорошо сделаны) увидит будущий работодатель. Если ты знаешь что такое система контроля версий, то вот хороший мануал по гиту rogerdudler.github.io/git-guide/index.ru.html

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

Comments

[Ivan-P]

chocolatey install nodejs
npm install -g less

А куда это вводить? В консоль винды?

[Георгий Григорьев]

угу. chocolatey можно поставить с chocolatey.org

Answer 8

[M-ka]

LESS -- хз, где используют. Может типа показать, мол какие мы крутые или какие ленивые...
git --- ну консольный вариант знать не обязательно, если использовать какую то иде, которая его поддерживает, разве, что с консоли может пригодиться только команды на удаление веток, отмена комита или пуша. Применяется везде, всеми, постоянно. Вариант в иде не требует изучения, достаточно, что бы рассказали последовательность или почитать на хабре. Ранее был распространен svn, до него cvs (ну этим тремя пришлось пользоваться, другие не были столь популярные)

npm, grunt, bower -- комплекс инструментов для разных целей, необходимость знания таковых зависит от конкретного места работы (вместо grunt использую реквайр).
bower и npm не требуют изучения для веба, достаточно гугла, что бы можно было разобраться, что да как установить и запустить без погружения в детали.

Comments

[Георгий Григорьев]

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

[M-ka]

Георгий Григорьев: что бы использовать бутстрап, нафиг не нужно тему подганять... а делается в одну строку обычных стилей, вместо пересборки всего бутстрапа.... Как результат, обновляй себе бутстрап до актуальной версии с минимальным телодвижением без пересборки. А если пойти через Ж....У, и пересобирать, на выходе будет неподдерживаемый продукт, от которого вскоре откажутся... и новому человеку прийдется перепиливать сделаное через Ж...У.
Вот и все применение лесс/сасс на практике... которые только и усложняют жизнь тем, кто в теме...

[Георгий Григорьев]

M-ka: уважаемый, вы сейчас всерьез что поправить variables, вы предпочтете правит откомпилированный css? а когда бутсрап обновлять будете, опять поправите?

[Георгий Григорьев]

M-ka: или просто лень освоить новую технологию и куда лучше называть "это все лукавого"

[M-ka]

Георгий Григорьев: возможно просто не допоняли друг друга но мне написаное показалось таким: использовать лесс для того, что бы за необходимости править бутстрап... что считаю не правильным. Варианты с коробки должны быть вариантами с коробки, что бы по мимо тебя любой мог взять последнюю актуальную версию и не вносить в нее изменений. Потому как таковое применения лесс теряется, о котором было написано. А если говорить про лень изучения нового, то из-за десятка - двух строк, если использовать бутстрап или что подобное, теряется смысл для "чтобы тему подогнать исходниками less"....

Answer 9

[Олег Абражаев]

Просто берешь и делаешь. По ходу читаешь доки и маны.

Answer 10

[Антон Ванин]

Посоветую почитать bi3x.net. Понятно описано именно установка и сборка проекта npm, grunt, bower.