Bower, Gulp и Yeoman


Bower, Gulp и Yeoman

7386 просмотра

4 ответа

2451 Репутация автора

Я бэкэнд-разработчик, и меня немного смущают npm, bower, gulp, grunt и Yeoman. Всякий раз, когда я спрашиваю кого-то, какова его цель, ответ имеет тенденцию сводиться к менеджеру по зависимости — для всех них. Конечно, нам не нужны четыре разных инструмента, которые все делают одинаково?

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

  • SVN хранит, управляет и отслеживает изменения в нашем исходном коде

Я использовал Maven, Jenkins, Nexus и Ant в прошлом; Может быть, вы могли бы сравнить инструменты выше с этим?

Также не стесняйтесь добавлять другие внешние инструменты в список.

Вот что я узнал до сих пор — хотя я не уверен, что это правильно:

  • Беседки менеджер зависимостей для развития / библиотек фронтальной JS, использует список плоской зависимости
  • Менеджер зависимостей npm для сервера node.js, может разрешать транзитивные зависимости / деревья зависимостей
  • grunt запускает задачи, очень похожие на Jenkins, но локальность в командной строке
  • Yeoman предоставил строительные леса, то есть каркасные проекты
  • глоток такой же, как хрюканье, но написано только в js
  • сервер node.js для приложений js?
  • git децентрализованный SCM / VCS, аналог svn / cvs

Ответы (4)

7 плюса

111 Репутация автора

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

  1. Я использую Йомана, чтобы построить базовый скелет.
  2. Я использую узел в качестве среды выполнения для моего приложения. то есть. бегать node appname
  3. Я использую npm для установки модулей узла, чтобы помочь мне написать приложение в узле
  4. Мне может понадобиться какой-то компонент из bower, такой как интерфейсные библиотеки, поэтому используйте bower для их получения.
  5. Теперь, чтобы выполнить несколько повторяющихся задач, я буду использовать grunt или gulp для написания некоторых задач. Поэтому каждый раз, когда я хочу повторить это, скажем, сверните мои js-файлы, которые я называю grunt / gulp, и заставьте их делать это. Разница, которую вы спрашиваете, Gulp основан на потоке, а grunt основан на задачах.
  6. Я делаю контроль версий, используя git, чтобы отслеживать изменения

Автор: JoviaArk Размещён: 22.04.2020 08:51

1 плюс

5509 Репутация автора

Gulp vs Grunt: Gulp обеспечивает большую гибкость благодаря автоматизации задач, Grunt обладает встроенной функциональностью в соответствии с общими практиками разработки. Есть два основных различия между Grunt и Gulp:

  • Grunt фокусируется на конфигурации, а Gulp — на коде
  • Grunt был построен на основе набора встроенных и часто используемых задач, в то время как Gulp пришел с идеей ничего не навязывать, а то, как разработанные сообществом микро-задачи должны соединяться друг с другом. Читать здесь
  1. NodeJS: это неблокирующий серверный язык сценариев. Это означает, что операции не будут блокировать дальнейшее выполнение, пока текущая операция не завершится.

    Git: Как вы упомянули, это инструмент SCM, широко используемый. Согласно документации GitHub, она отличается от других инструментов SCM, поскольку данные никогда не удаляются.

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

    Когда вы выполняете действия в Git, почти все они только добавляют данные в базу данных Git. Очень трудно заставить систему сделать что-либо, что не может быть отменено, или заставить ее каким-либо образом стереть данные. Как и в любой VCS, вы можете потерять или испортить изменения, которые вы еще не сделали; но после того, как вы сделаете снимок в Git, его очень трудно потерять, особенно если вы регулярно отправляете свою базу данных в другое хранилище.

  1. Bower vs NPM: Bower и NPM являются менеджерами зависимостей, но модули Bower предназначены для фронт-энда. NPM — это огромная коллекция модулей, которые будут использоваться с бэкэндом NodeJS. Этот так ответ охватывает это лучше

Автор: Amresh Venugopal Размещён: 22.04.2020 08:52

1 плюс

1252 Репутация автора

Я добавил некоторые детали:

npm — менеджер пакетов для javascript, npm — экосистема пакетов nodejs, но его можно использовать только для внешних проектов.

grunt & gulp полезны для разделения и автоматизации таких задач, как минификация, компиляция, модульное тестирование в командной строке, это более легкое решение, чем (например) Visual Studio, поскольку этот процесс представляет собой только отдельную (и обычно легковесную) командную строку / процесс.

Относительно различий между gulp , grunt и bower уже есть билет: каковы различия между Grunt, Gulp.js и Bower? Почему и когда их использовать?

Nodejs — это скорее среда исполнения javascript . Node.js позволяет создавать веб-серверы и сетевые инструменты с использованием js и набора «модулей», которые обрабатывают различные основные функции и другие основные функции. Источник

Этот билет возобновляет различия между Git и Subversion: почему Git лучше, чем Subversion?


Автор: Giu Размещён: 22.04.2020 09:04

44 плюса

944 Репутация автора

Вы находитесь рядом! Добро пожаловать в JavaScript :)

Позвольте мне дать вам краткое описание и одну особенность, с которой большинство разработчиков проводят некоторое время.

bower Ориентирован на пакеты, которые используются в браузере. Каждый bower install

указывает на один файл, который будет включен (больше может быть загружено). Благодаря успеху webpack, browserify и babel он в основном устарел как первоклассный менеджер зависимостей.

Обновление 2020 года: беседка в основном устарела в пользу НПМ

npm Historical сосредотачивается на коде NodeJS, но имеет низвергнутую бауру для модулей браузера. Не позволяйте никому обмануть вас: NPM огромен. NPM также загружает МНОГО файлов в ваш проект, и новая установка npm всегда является хорошей причиной для приготовления новой чашки кофе. NPM прост в использовании, но может нарушить работу вашего приложения при изменении окружения из-за свободного способа ссылаться на версии и произвольности публикации модулей. Исследование термоусадочной пленки и npm install —save-exact

Обновление 2020 года: NPM вырос! Много улучшений, касающихся безопасности и воспроизводимости были реализованы.

grunt Облегчает автоматизацию задач. Глотает старший и несколько более вялый брат. Сообщество JavaScript часто встречалось с ним в 2014 году. В некоторых местах Grunt уже считается наследием, но есть еще много действительно мощных средств автоматизации. Конфигурация может быть кошмаром для больших вариантов использования. Для этого есть модуль ворчания.

Обновление 2020 года: хрюканье в основном устарело. Простые в написании конфигурации веб-пакетов убили его.

Глоток ли то же самое, хрюкать , но быстрее.

npm run-script Вам может вообще не понадобиться исполнители задач. Скрипты NodeJS действительно просты в написании, поэтому большинство сценариев позволяют настраивать рабочий процесс автоматизации задач. Запустите сценарии из контекста вашего файла package.json, используя npm run-script

Веб-пакет Не пропустите веб-пакет. Особенно, если вы чувствуете себя потерянным из-за множества способов написания JavaScript в последовательный модульный код. Webpack упаковывает файлы .js в модули и делает это великолепно. Webpack обладает широкими возможностями расширения и предлагает хорошую среду разработки: webpack-dev-server Используйте вместе с babel для наилучшего возможного использования JavaScript на сегодняшний день.

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

Для чего хороши npm, bower, gulp, Yeoman и grunt?

Я бэкэнд-разработчик и немного смущен npm, bower, gulp, grunt и Yeoman. Всякий раз, когда я спрашиваю кого — то, какова его цель, ответ сводится к менеджеру зависимостей-для всех них. Конечно, нам не нужны четыре разных инструмента, которые делают то же самое?

может кто-нибудь объяснить, что каждый из них хорош для как можно меньше предложений — если возможно, только один инструмент, используя язык пятилетнего возраста (с навыками развития) мог понять?

  • SVN хранит, управляет, и отслеживает изменения в исходный код

в прошлом я использовал maven, Jenkins, nexus и ant; может быть, вы могли бы сравнить инструменты выше с этими?

также не стесняйтесь добавлять в список другие интерфейсные инструменты.

вот что я узнал до сих пор — не уверен, что это правильно, хотя:

  • беседке диспетчер зависимостей для интерфейсных библиотек разработки/JS использует плоский список зависимостей
  • НПМ менеджер зависимостей для узла.JS server, может разрешать транзитивные зависимости / деревья зависимостей
  • грунт запускает задачи, как и Дженкинс, но локальность в командной строке
  • старшина обеспеченные леса, i.e скелет проекты
  • залпом то же, что и grunt, но написано только в js
  • узел.js сервер для приложений js?
  • git децентрализованный SCM/VCS, аналог svn / cvs

4 ответов

вы находитесь рядом! Добро пожаловать на JavaScript :)

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

беседке Фокусируется на пакетах, которые используются в браузере. Каждый bower install

указывает ровно на один файл, который должен быть включен (можно загрузить больше). Из-за успеха webpack, browserify и babel он в основном устарел как менеджер зависимостей первого класса.

npm Исторически фокусируется на коде NodeJS, но свергнул bower для модулей браузера. Не позволяйте никому обмануть вас: NPM огромен. NPM также загружает много файлов в ваш проект, и новая установка npm всегда является хорошей причиной для заваривания новой чашки кофе. NPM прост в использовании, но может сломать ваше приложение при изменении сред из-за свободного способа ссылки на версии и произвольности публикации модулей. Исследования Термоусадочная Пленка и npm install —save-exact

Илон Маск рекомендует:  Что такое код mcrypt_enc_get_algorithms_name

грунт Облегчает автоматизацию задач. Глотает старший и несколько более вялый брат. Сообщество JavaScript часто общалось с ним в 2014 году. Grunt уже считается наследием в некоторых местах, но все еще существует большое количество действительно мощной автоматизации. Конфигурация может быть кошмаром для больших случаев использования. для этого есть модуль grunt.

залпом Делает то же самое, что и grunt, но быстрее.

npm run-script Возможно, вам вообще не понадобятся бегуны. Скрипты NodeJS действительно легко писать так, большинство случаев использования позволяют customizedtask-автоматизация рабочего процесса. Запуск скриптов из контекста пакета.файл json с помощью npm run-script

webpack Не пропустите webpack. Особенно, если вы чувствуете себя потерянным на многих способах написания JavaScript в когерентный модульный код. Webpack пакеты .JS файлы в модули и делает это великолепно. Webpack очень расширяема и предлагает хорошую среду разработки:webpack-dev-server Использовать совместно с Бабель для лучшего возможного опыта JavaScript на сегодняшний день.

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

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

  1. Я использую старшина построить базовый скелет.
  2. Я использую узел как среда выполнения для моего приложения. то есть. запустить node appname
  3. Я использую npm для установки модулей узла для помощи мне написать приложение в узле
  4. мне может понадобиться какой-то компонент из беседке как интерфейсные библиотеки, поэтому используйте bower для принеси это.
  5. теперь, чтобы сделать некоторые повторяющиеся задачи, я буду использовать хрюкать или глотать, чтобы написать некоторые задачи. Поэтому каждый раз я хочу повторить это, скажем minimify мои JS файлы я называю грунт/глоток и заставить их сделать это. Разница, которую вы спрашиваете, глоток основан на потоке, а grunt-на задаче.
  6. Я делаю контроль версий с помощью git отслеживать изменения

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

  • Grunt фокусируется на конфигурации, в то время как Gulp фокусируется на коде
  • Grunt был построен вокруг набора встроенных и часто используемых задач, в то время как Gulp пришел с идеей обеспечения ничего, но как сообщество разработано микро-задачи должны соединяться друг с другом читать здесь
  1. NodeJS: это неблокирующий серверный язык сценариев. Это означает, что операции не будут блокировать дальнейшее выполнение до завершения текущей операции.

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

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

    когда вы делаете действия в Git, почти все они только добавляют данные в базу данных Git. Это очень сложно заставить систему делать то, что нельзя отменить или стереть данные любой способ. Как и в любом VCS, вы можете потерять или испортить изменения, которые вы еще не зафиксировали; но после фиксации моментального снимка в Git очень трудно потерять, особенно если вы регулярно нажимаете свою базу данных в другой репозиторий.

  1. Bower vs NPM: Bower и NPM являются менеджерами зависимостей, но модули Bower предназначены для интерфейсной разработки. NPM-это огромная коллекция модулей для использования с NodeJS базовая программа. это так ответ покрывает его лучше

Я добавил некоторые детали:

НПМ — менеджер пакетов для javascript, npm-экосистема пакетов nodejs, но его можно использовать только для интерфейсных проектов.

грунт & залпом полезны для разделения и автоматизации таких задач, как минимизация, компиляция, модульное тестирование в командной строке, это более легкое решение, чем (например) visual studio, поскольку процесс является только отдельной (и обычно легкой) командой линия/процесс.

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

Nodejs больше javascript время работы. Узел.js позволяет создавать веб-серверы и сетевые инструменты с использованием js и коллекции «модулей», которые обрабатывают различные основные функции и другие основные функции. источник

этот билет возобновляет различия между Git и Subversion: почему Git лучше, чем Subversion?

ikfi.ru

gulp, npm и bower — враги рутины

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

Что это за ребята?

Наверняка вы слышали о node.js. По сути это тюнингованный движок JavaScript V8, предназначенный для запуска js вне браузерной среды, т.е. для использования JS в качестве серверного языка сценариев или для разработки утилит командной строки.

Как и у любой современной платформы, у node.js имеется менеджер пакетов, позволяющий установить любой необходимый пакет для Вашего приложения — npm.

На момент написания статьи, npm интегрирован в node.js, поэтому если Вы установили ноду, npm у вас уже есть.

Bower, как и npm, является пакетным менеджером, однако отличается тем, что нацелен на frontend библиотеки. К примеру, с помощью bower можно установить bootstrap или jquery со всеми зависимостями.

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

Эти ребята способны сэкономить кучу вашего драгоценного времени! (нет, серьёзно!)

Как Вы начинаете новый проект? Заходите на getbootstrap.com, скачиваете архив с bootstrap, заходите на jquery.com, скачиваете jquery, заходите еще на n-ое количество сайтов в поиске нужных библиотек, а это, между прочим, довольно затратно по времени, да еще и требует кучи телодвижений и действий.

В тот момент, когда у Вас наконец сработает заветное — ЗАДОЛБАЛО, Вы и поймете выгоды от использования этих инструментов.

Один только bower дает возможность сэкономить кучу времени на поиске и установке нужных frontend библиотек. Буквально одной командой мы устанавливаем bootstrap, jquery, кучку других полезных и не очень библиотек, причем все необходимые зависимости будут разрешены без вашего участия. Все что вам остается сделать — подключить эти библиотеки в html файле.

Gulp позволяет автоматизировать сборку проекта, имеет огромную библиотеку плагинов для практически любых задач — от компиляции less/sass и запуска autoprefixer до сжатия изображений и автоматической перезагрузки страницы в браузере при изменении исходных файлов (так называемый live-reload).

На словах ты Лев Толстой.

Давайте рассмотрим пример небольшого проекта, в котором используем все перечисленные инструменты.

В нашем проекте мы будем использовать less в качестве препроцессора css. Также нам понадобятся bootstrap, jquery, autoprefixer.

Если bower и gulp еще не установлены, сделаем это:

Ключ -g означает что пакеты нужно установить глобально, т.е. bower и gulp станут доступны как обычные утилиты командной строки.

Далее нужно создать папку с проектом и инициализировать в ней npm:

Команда npm init задаст вам пару вопросов и создаст файл package.json. В этом файле будет храниться информация о проекте, а также списки зависимостей. Это очень удобно при совместной разработке, поскольку позволяет не засорять cvs кучей библиотек.

В случае, когда вы получаете обновленный package.json следует выполнять команду npm update, чтобы обновить/доустановить библиотеки. Также это работает и в bower.

Здесь мы снова устанавливаем gulp, но на этот раз локально. Это нужно для того чтобы функционал gulp был доступен в gulpfile.

Затем инициализируем bower:

Подобно npm — bower хранит списки установленных зависимостей в файле bower.json, поэтому в cvs достаточно будет добавить только его.

Итак, полдела сделано! Установим jquery и bootstrap (jquery является зависимостью bootstrap, поэтому его можно было бы опустить):

Ключ —save заставляет bower выставить в bower.json имена установленных пакетов. Также существует ключ —save-dev, который служит для разграничения пакетов по разным окружениям, но пока что мы этой темы касаться не будем.

На заметку

По умолчанию bower загружает все компоненты в папку bower_assets. Папку назначения можно переопределить, создав рядом с bower.json файл .bowerrc, со следующим содержанием:


ОК! С bower разобрались, теперь самое время написать gulpfile для сборщика проекта.

Вот небольшой пример gulpfile:

Основное предназначение — компилировать less → css, выставлять вендорные префиксы, а также синхронизировать изменения файлов с браузером.

gulp

Как вы увидели выше — писать сборочные скрипты для gulp достаточно просто, ведь это ни что иное как обыкновенный JavaScript!

Сборочный скрипт состоит из списка задач (task). Задачи это как-бы именованные наборы действий, каждую задачу можно вызвать отдельно — приписав её имя в качестве параметра при вызове gulp. (Например, gulp less запустит только компиляцию less). При запуске gulp без параметров, будет запущена задача default.

У задач могут быть зависимости от других тасков, это определяется вторым параметром функции task (если передать массив имен задач, то они будут выполнены перед зависимой задачей).

Например в нашем gulpfile задача browser-sync перед своим выполнением вызовет задачу less.

Тело задачи обычно состоит из вызовов gulp.src() — эта функция является началом gulp конвеера. Параметр функции обычно задает файл (или маску пути), который будет передан последующим функциям по цепочке.

Функция pipe является элементом конвеера gulp и позволяет выполнить ту или иную обработку файла и передает результат своего выполнения следующей конвеерной функции. (Например, pipe(less(. )) преобразует less в css, после чего pipe(autoprefixer(. )) выставляет вендорные префиксы в готовом css).

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

В принципе, для успешного юзинга gulp этой информации должно быть вполне достаточно, тем более что каждый gulp-пакет распространяется с примером подключения. (В большинстве случаев — юзаем стратегию ctrl+c, ctrl+v).

Верстаем

Со скриптами gulp мы разобрались, поэтому самое время испытать все это в бою. Я предлагаю создать такую html страницу (index.html):

Стилизуем

Теперь добавим в папку less файл style.less с таким текстом:

Запускаем

Все готово, можно попробовать запустить gulp. В результате выполнения в браузере откроется livereload вкладка, как на скриншоте:

Если сейчас поменять что-то в верстке или в less файле, то файлы будут автоматически перекомпилированы, после чего страница перезагрузится с новым результатом.

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

Что ж, с инструментами разобрались, самое время обезжиривать HTML!

What are the differences between NPM, Bower, Grunt, Gulp, Webpack, Browserify, Slush, Yeoman, and Express?

a iI d sWgQS Kmv b Bk y MJUCA tvg F eTkx o cHNym r fJkF g wxQ e o Nlc o X f oGKII wmmVx E zA m bKPOj p vubdz i RU r rdcGI e MzQu s vI : eoV ly B F u bmRN i jCfSG l C d l Uwpgt a G EJZ C RZ i STpp t rBj y uNMmu

Answer Wiki

There is absolutely no difference between them whatsoever. These are all searchable in DuckDuckGo (some people prefer Google you may also try that)

Anyway, I would like to contribute something here since I love these packages but you really need to work on the way you ask questions if you want to do something serious in this industry. A good question shouldn’t imply the message that you are lazy to Search things for yourself.

Toly blog

Python and Django notes

Ускоряем разработку на AngularJS с помощью Yeoman, Grunt и Bower

Mar 26 th , 2014

Любите ли вы или ненавидите его, нет никаких сомнений, что AngularJS является фреймворком о котором говорит каждый разработчик. Он может и не всем подходит, но тем неменее у AngularJS есть много адаптивных, эффективных и мощных возможностей. Добавьте несколько полезных инструментов разработки, таких как Yeoman, Grunt и Bower и вы получите невероятно быстрый процесс разработки прототипов.

Что мы рассмотрим

В этом руководстве мы рассмотрим:

  • генерацию каркаса ANgularJS приложения с помощью Yeoman
  • использование Grunt для ускорения разработки и автоматизации повторяющихся задач
  • использование Bower для добавления сторонних плагинов/фреймворков
  • выполнение небольших изменений в вашем Angular приложении

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

Чтобы получить максимальную отдачу от этого урока мы рекомендуем вам иметь следующие навыки и знания:

  • терминал и знание командной строки
  • установленные NodeJS и NPM
  • знание основ JS, CSS и HTML

Исходники

Репозиторий нашего учебного проекта можно найти здесь.

Давай начнем!

Хорошо, давайте приступим к реализации. Первое, что нам нужно сделать, это установить Yeoman, Grunt и Bower. Используем NPM, что бы установить все сразу. Выполните следующую команду в терминале:

Это было просто, но теперь в нашем распоряжении мощный набор инструментов. Я объясню как использовать каждый из них.

Yeoman

Yeoman используется для генерации каркаса вашего приложения. Он создаст основные каталоги, файлы и настройки проекта, что бы его можно было сразу же запустить. Помимо этого существуют различные особые генераторы, которые можно использовать для создания приложений определенного вида — мы собираемся использовать удобный генератор для AngularJS.


Одной из лучших функций Yeoman является возможность использования самописных генераторов. Мы установим генератор AngularJS, что бы сделать минимально работающее Angular приложение как можно быстрее.

Запустите следующую команду для установки AngularJS генератора:

Теперь можно сгенерировать новенькое Angular приложение. В новом каталоге проекта запустите:

Генератор задаст вам пару вопросов. Вы можете ответить утвердительно для установки Twitter Bootstrap. Так же ответьте да для включитьв проект ngResource. Остальное, для текущего проекта, нам не понадобится, поэтому отвечайте — нет.

Теперь расслабьтесь (на несколько секунд) и наблюдайте как генератор делает свою магию. Yeoman создаст файлы и каталоги, а затем он запустит установку Bower (подробности об этом чуть позже) и NPM установит различные зависимости, и наконец он выполнит начальное конфигурирование.

Что в коробке?

Давайте взглянем на то, что сделал нам Yeoman:

Давайте рассмотрим наиболее важные из них:

app/ — Каталог содержит ваше статическое приложение. Он включает ​​HTML, CSS и JavaScript, и здесь вы будете заниматься большую часть времени разработки.

package.json — Этот файл помогает NPM определить наш проект, а также разрешать его зависимости. Он также может содержать всевозможные метаданные, относящиеся к вашему проекту.

node_modules/ — Название этого каталога говорит само за себя. Здесь хранятся модули node, от которых зависит ваш проект.

Gruntfile.js — Это яваскриптовый файл который отвечает за конфигурацию вашего проекта, а также различных задач и плагинов, используемых в вашем проекте. Например, здесь можно указать, что в проекте используется Uglify и что вы хотите запускать задачу Uglify в определенном каталоге во время сборки проекта. Подробнее о Grunt чуть позже.

component.json — Этот файл используется для уведомления менеджера пакетов Bower о зависимостях проекта, а также другие метаданные. В последних версиях Bower этот файл называется bower.json — об этом чуть позже.

.bowerrc — Используется для передачт опций в Bower.

Karma files — Karma — фреймворк для тестирования. Мы будем использовать его для запуска нескольких тестов для нашего Angular приложения.

Уф! Это довольно много, что бы запомнить — но как только вы больше познакомитесь с работой генератора Yeoman, вам понравится то, что он делает все это за вас.

Давайте добавим еще несколько вещей в наш проект, прежде чем начать приступить к разработке.

Bower — пакетный менеджер для веб разработки

Перед тем как использовать Bower, небольшую часть конфигурации нужно написать самим. Bower недвано изменил название файла component.json на bower.json, таким образом нам нужно привести код в соответствие с этим.

Первое, что нам нужно сделать, это небольшое изменение в нашей Bower конфигурации в .bowerrc — откройте его и добавьте следующее:

Это скажет пакетному менеджеру Bower использовать файл bower.json для получения инструкций о том как устанавливать этот пакет.

Так как мы используем Bower для разрешения зависимостей нашего проекта, то также нужно переименовать файл component.json в корне нашего прокета в файл bower.json. Незначительные премудрости при использовании таких передовых технологий.

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

Отлично, давайте дадим ему поработать. Ранее Yeoman воспользовался Bower что бы установить Bootstrap, но то были только CSS файлы. А нам нужны и модные яваскиптовые виджеты.

Так как мы делаем Angular приложение, нам нужны скрипты для Bootstrap которые работают с Angular.

К счастью, команда Angular UI портировала скрипты Bootstrap для Angular. Давайте используем Bower чтобы установить их библиотеку!

Флаг -save указывает макетному менеджеру добавить зависимость в bower.json.

Фантастика! Это было просто, не так ли? Теперь перейдите в каталог вашего приложения (app/) и давайте посмотрим, с чем мы будем работать.

Наша статическое приложение

Взгляните на содержание каталога app/ :

index.html — Это должно быть известно большинству читателей, это главная HTML-страница вашего приложения.

components/ — Это каталог компонентов, такой же как и node_modules/ , но для Bower. Здесь хранятся все библиотеки, которые вы установили с помощью Bower. Например, AngularUI Bootstrap находится здесь.

scripts/ — Опять же, знакомый для большинства каталог. Здесь хранятся JavaScript файлы ваших приложений. Обратите внимание, что библиотеки, такие как AngularJ, будут находиться в каталоге для компонентов, так что каталог scripts/ только для тех файлов, которые пишете вы сами.

styles/ — Все ваши CSS/Sass, что бы сделать ваше приложение более красивым.

views/ — Это каталог, где будут храниться ваши шаблоны для Angular.

Теперь более внимательно посмотрим на файлы AngularJS.

AngularJS

Angular-генератор в Yeoman сделал для нас самое необходимое: модуль, контроллер и представление. Давайте рассмотрим каждый из них:

Модуль: /app/scripts/app.js

Контроллер: /app/scripts/controllers/main.js

Представление: app/views/main.html

Давайте посмотрим его в действии!

Мы готовы впервые взлянуть на наше приложение. Вернитесь в корневой каталог вашего приложения и выполните команду:

Grunt

Grunt является мощным, многофункциональным, исполнителем задач на JavaScript. Короче говоря, он позволяет автоматизировать повторяющиеся задачи, такие как компиляция CoffeeScript, минификация CSS, проверка корректности кода и т.д. Мы так же будем делать это, для того что бы подготовить наш код для разработки и развертывания.

Grunt проходится по каталогу нашего проекта и подготавливает его для нас, например компилирует подключенный Bootstrap SASS в CSS.


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

Что бы быть уверенным в корректной работе, откройте исходный код страницы и посмотрите подключенный main.css . Он должен содержать кучу Bootstrap кода — благодаря магии Bower и Grunt.

Давайте изменим его

Пришло время попробовать наши силы в изменении проекта. Так как это Angular проект, начнем с тестов.

Yeoman любезно сгенерировал пример теста, так что давайте начнем с него.

Мы собираемся добавить еще один элемент в список awesomeThings , поэтому откройте test/spec/controllers/main.js и измените ожидаемую длину списка на 4 вместо 3.

test/spec/controllers/main.js

Теперь мы можем использовать еще одну замечательную возможность в Grunt:

Эта команда запустит наши Karma-тесты. Они должны выдать ошибку потому, что ожидается 4 элемента в awesomeThings , а у нас по прежнему 3. Давайте исправим это и сделаем так, что бы наши тесты прошли.

Откройте app/scripts/controllers/main.js и добавтье еще один элемент в список:

app/scripts/controllers/main.js

Сохраните файл и запустите тесты снова:

На этот раз они должны успешно завершиться. Теперь вы можете запустить приложение в браузере ( grunt server ) и заметить, что есть дополнительный пункт в списке. Аккуратные да?

Использование пакета, установленного через Bower

Давайте используем библиотеку AngularUI Bootstrap, которую мы подключили ранее, что бы наш список awesomeThings стал раскрываемым.

Важно: Bower — просто пакетный менеджер, он не отвечает за добавление файлов в index.html . Нам нужно сделать это самим.

Поэтому откройте app/index.html и добавьте следующую строку:

Потом, в соответствии со вступительным руководством по AngularUI Bootstrap , мы должны добавить их модуль в качестве зависимости в наш модуль Angular.

Откройте app/scripts/app.js и добавьте ui.bootstrap как зависимость:

/app/scripts/app.js

Хорошо, теперь можно его использовать. Сделайте несколько изменений в нашем представлении:

app/views/main.html

Мы использовали несколько CSS классов из Bootstrap и переместили директиву ng-repeat что бы создать пункты меню, а не стандартный список.

Директивы AngularUI Bootstrap работают на классах, так что просто добавив класс dropdown-toggle к тегу, мы получили полностью рабочий выпадающий список!

Еще нужно добавить модуль Bootstrap UI к нашим тестам, иначе они будут валиться до тех пор пока на будут внесены следующие изменения:

test/spec/controllers/main.js

/karma.conf.js

Запустите grunt test , что бы убедиться, что тесты успешно пройдены.

Теперь вы можете открыть ваше приложение в браузере ( grunt server ) еще раз и посмотрите на результат вашей работы.

Заключение

Что у вас теперь есть! Простое Angular приложение, подключенная сторонняя библиотека, тесты, минификация и куча других вкусностей с минимальными усилиями!

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

What’s Yeoman?

Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive.

To do so, we provide a generator ecosystem. A generator is basically a plugin that can be run with the `yo` command to scaffold complete projects or useful parts.

Through our official Generators, we promote the «Yeoman workflow». This workflow is a robust and opinionated client-side stack, comprising tools and frameworks that can help developers quickly build beautiful web applications. We take care of providing everything needed to get started without any of the normal headaches associated with a manual setup.

With a modular architecture that can scale out of the box, we leverage the success and lessons learned from several open-source communities to ensure that developers use it as intelligently as possible.

As firm believers in good documentation and well thought out build processes, Yeoman includes support for linting, testing, minification and much more, so developers can focus on solutions rather than worrying about the little things.

Tools

The Yeoman workflow comprises three types of tools for improving your productivity and satisfaction when building a web app: the scaffolding tool (yo), the build tool (Gulp, Grunt etc) and the package manager (like npm and Bower).

All three of these tools are developed and maintained separately, but work well together as part of our prescribed workflow for keeping you effective.

Yeoman или как за минимильное время cоздать идеальную front-end среду для старта веб проекта ?

Продолжаем изучать инструменты автоматизации рабочего процесса front-end разработки. В этом уроке, мы познакомимся с инструментом Yeoman, позволяющим за кратчайшие сроки создать всю основу для старта нового веб-приложения.

Yeoman — это утилита для выстраивания удобного и современного процесса front-end разработки. Состоит она из трех компонентов:

  • Yo — утилита для быстрой установки основы приложения.
  • Grunt — Javascript утилита выстраивающая процесс билда.
  • Bower — менеджер зависимостей/пакетов клиентских Javascript библиотек.


С Grunt и Bower вы уже знакомы, осталось разобраться только с Yo.

Перед тем как мы приступим к основной части этого урока удостоверьтесь, что на вашем компьютере имеется следующий предустановленный софт:

  • Node.js
  • NPM
  • Ruby
  • Sass and Compass Gems for Ruby
  • LiveReload

Ну что же, теперь мы готовы прочувствовать всю прелесть Yeoman. Создадим папку с будущем проектом Yeoman, откроем консоль и перейдем в эту папку. *Обратите внимание, что все последующие команды консоли выполняются внутри папки с проектом.

Начнем с установки. Осуществляется она следующей командой:

Теперь установим все необходимые в нашем проекте генераторы, в этом примере мы будем строить основу для проекта на Backbone.js в качестве MVC фреймворка и Mocha в качестве библиотеки для тестирования. Следовательно установим их генераторы.

Следующим шагом будет развертывание самой основы с помощью генераторов, делается это следующей командой. Обратите внимание —template-framework=handlebars, указывает на то, что в качестве клиентского шаблонизатора проекта мы будем использовать Handlebars.

Во время установки Yeoman будет задавать вам вопросы по тому, какие библиотеки или инструменты включать в сборку. На все вопросы требуется отвечать либо утвердительно (Y), либо отрицательно (n). Я отвечаю на все — да! Включаю в проект Twitter Bootstrap, Sass и Require.js.

Теперь вся основа для нашего проекта готова! Остались лишь небольшие штрихи.

Например вот этой командой…

…мы удостоверимся, что установили все зависимости npm и bower, используемые нашим проектом. Поэтому рекомендую вводить ее каждый раз после установки проекта.

Для чего нужны npm, bower, gulp, Yeoman и grunt?

Я бэкэнд-разработчик, и меня немного смущают npm, bower, gulp, grunt и Yeoman. Всякий раз, когда я спрашиваю кого-то, какова его цель, ответ имеет тенденцию сводиться к менеджеру по зависимости — для всех них. Конечно, нам не нужны четыре разных инструмента, которые все делают одинаково?

Может ли кто-нибудь объяснить, для чего каждое из них хорошо, в как можно меньшем количестве предложений — если возможно, по одному на инструмент, используя язык, который может понять пятилетний ребенок (с навыками разработки)?

  • SVN хранит, управляет и отслеживает изменения в нашем исходном коде

Я использовал Maven, Jenkins, Nexus и Ant в прошлом; может быть, вы могли бы сравнить инструменты выше с этим?

Также не стесняйтесь добавлять другие внешние инструменты в список.

Вот что я узнал до сих пор — хотя я не уверен, что это правильно:

  • менеджер зависимостей bower для интерфейсной разработки /JS-библиотек, использует плоский список зависимостей
  • Менеджер зависимостей npm для сервера node.js, может разрешать транзитивные зависимости / деревья зависимостей
  • grunt запускает задачи, очень похожие на Jenkins, но локальность в командной строке
  • Yeoman предоставил строительные леса, то есть каркасные проекты
  • глоток такой же, как хрюканье, но написано только в js
  • сервер node.js для js-приложений?
  • git децентрализованный SCM/VCS, аналог svn/cvs

4 ответа

Вы близки! Добро пожаловать в JavaScript:)

Позвольте мне дать вам краткое описание и одну особенность, с которой большинство разработчиков проводят некоторое время.

bower Ориентирован на пакеты, которые используются в браузере. каждый bower install

указывает только на один файл, который будет включен (больше может быть загружено). Благодаря успеху webpack, browserify и babel он в основном устарел как менеджер зависимостей первого класса.

Обновление 2020 года: беседка в основном устарела в пользу НПМ

npm Historical сосредотачивается на коде NodeJS, но имеет низвергнутую бауру для модулей браузера. Не позволяйте никому обмануть вас: NPM огромен. NPM также загружает МНОГО файлов в ваш проект, и новая установка npm всегда является хорошей причиной для приготовления новой чашки кофе. NPM прост в использовании, но он может сломать ваше приложение при изменении среды из-за слабого способа ссылаться на версии и произвола публикации модулей. Исследование термоусадочной пленки и npm install —save-exact

Обновление 2020 года: NPM вырос! Много улучшений, касающихся безопасности и воспроизводимости были реализованы.

grunt Облегчает автоматизацию задач. Глотает старший и несколько более вялый брат. Сообщество JavaScript часто встречалось с ним в 2014 году. В некоторых местах Grunt уже считается наследием, но есть еще много действительно мощных средств автоматизации. Конфигурация может быть кошмаром для больших вариантов использования. Хотя для этого есть модуль ворчания.

Обновление 2020 года: хрюканье в основном устарело. Простые в написании конфигурации веб-пакетов убили его.

Делает то же самое, что и хрюканье, но быстрее.

npm run-script Вам, возможно, не понадобятся исполнители задач вообще. Скрипты NodeJS действительно просты в написании, поэтому большинство сценариев позволяют настраивать рабочий процесс автоматизации задач. Запустите сценарии из контекста вашего файла package.json, используя npm run-script

Веб-пакет Не пропустите веб-пакет. Особенно, если вы чувствуете себя потерянным из-за множества способов написания JavaScript в последовательный модульный код. Webpack упаковывает файлы.js в модули и делает это великолепно. Webpack обладает широкими возможностями расширения и предлагает хорошую среду разработки: webpack-dev-server Используйте вместе с babel для наилучшего возможного использования JavaScript на сегодняшний день.

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

Bower, Gulp и Yeoman

Создадим папку с названием myicons и воспользуемся генератором Tapp, который создаст все директории с пакетами Stylus, Jade, Gulp, Browserify, Bower и остальными.

При успешном запуске Yeoman у вас должна получится такая картинка:

После выполнения этих команд у вас получится приблизительно такая структура:

Запустим Gulp командой:

Остальные команды вы можете просмотреть в файле .gulpfile.

При успешном запуске у вас должна получится следующая картинка:

кроме этого должно открыться окно браузера по-умолчанию по адресу http://localhost:9000, которая будет иметь следующий вид:

Перейдём к нашему главному шаблону app/index.jade и вставим туда код для социконок, у меня получился такой:

Пару слов о том, как работает gulp с jade шаблоном в нашем случае при запуске команды gulp serve, если совсем упрощённо:

  1. Он наблюдает за изменениями файлов jade в папке app
  2. Конвертирует все файлы .jade в .html, сжимает и передаёт их в папку dist

Установка и подключение Font-awesome

Tapp генератор установит также и Bower — установщик пакетов. Воспользуемся им и установим иконочный шрифт Font Awesome:

Укажем стили в index.jade:

После этого в браузере у вас должны отобразится иконки:

Создание стилей с помощью Stylus

В комплекте у нас шёл и Stylus, цвета для социконок я брал с Brandcolors. Давайте воспользуемся мощью Stylus, создадим пару функций и придадим стили нашему коду, сделанному по BEM-методологии:

Для красоты я добавил transition свойство при наведении и уходе с иконки, поэтому получился такой код.

В результате этого должны получится вот такие иконки:

Код для вставки в ваш сайт можете найти в dist/index.html и dist/styles/main.css

Я создал на Github репозиторий с этим кодом, поэтому можете сразу склонировать себе и запустить проект:

Демо можете увидеть внизу на этом сайте. Как обычно — не стесняйтесь задавать вопросы и давать замечания в комментариях.

Front-End Tooling with Gulp, Bower, and Yeoman

Front-End Tooling with Gulp, Bower, and Yeoman teaches you how to use and combine these popular tools to set up a customized development workflow from start to finish.
In large web dev projects, productivity is all about workflow. Great workflow requires tools like Gulp, Bower, and Yeoman that can help you automate the design-build-deploy pipeline. Together, the Yeoman scaffolding tool, Bower dependency manager, and Gulp automation build system radically shorten the time it takes to release web applications.
Front-End Tooling with Gulp, Bower, and Yeoman teaches you how to set up an automated development workflow. You’ll start by understanding the big picture of the development process. Then, using patterns and examples, this in-depth book guides you through building a product delivery pipeline using Gulp, Bower, and Yeoman. When you’re done, you’ll have an intimate understanding of the web development process and the skills you need to create a powerful, customized workflow using these best-of-breed tools.
What’s Inside

  • Mastering web dev workflow patterns
  • Automating the product delivery pipeline
  • Creating custom workflows

About the Reader
This book is suitable for front-end developers with JavaScript experience.

Илон Маск рекомендует:  Что такое код mk_fp
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL