Coolest Guides On The Planet
Bower is a type of package manager for web development projects.
To install Bower on OSX you first need to have node.js and npm installed.
Launch the Terminal and run
It will install and leave you with the version number and where it is located.
Once installed you can set up a bower json file for your project configuration with …
Run through the wizard and leave blank any questions that you don’t have an answer for and you will have a bower.json file in your working directory.
To install a package you can run
Or any Github repo, with the git username/repo of a full git url or any valid url.
The –save-dev parameter will add the package to the list of project devDependencies in the bower.json file.
These packages will download in your current working directory in a sub-directory called bower_components, it will also download any dependencies of those packages.
To add in the CSS and JS of these dependencies to your project you can use wiredep
To move and concatenate all CSS and JS files from the bower_components to your actual build/development directory you can refer to grunt-bower-concat
Bower
A package manager for the web
Sponsors (become one):
Web sites are made of lots of things — frameworks, libraries, assets, and utilities. Bower manages all these things for you.
Keeping track of all these packages and making sure they are up to date (or set to the specific versions you need) is tricky. Bower to the rescue!
Bower can manage components that contain HTML, CSS, JavaScript, fonts or even image files. Bower doesn’t concatenate or minify code or do anything else — it just installs the right versions of the packages you need and their dependencies.
To get started, Bower works by fetching and installing packages from all over, taking care of hunting, finding, downloading, and saving the stuff you’re looking for. Bower keeps track of these packages in a manifest file, bower.json . How you use packages is up to you. Bower provides hooks to facilitate using packages in your tools and workflows.
Bower is optimized for the front-end. If multiple packages depend on a package — jQuery for example — Bower will download jQuery just once. This is known as a flat dependency graph and it helps reduce page load.
Install Bower
Bower is a command line utility. Install it with npm.
Bower requires node, npm and git.
For troubleshooting installation on different platforms, read the troubleshooting wiki page.
Getting started
Install packages
Install packages with bower install . Bower installs packages to bower_components/ .
A package can be a GitHub shorthand, a Git endpoint, a URL, and more. Read more about bower install .
Search packages
Search Bower packages and find the registered package names for your favorite projects.
Save packages
Create a bower.json file for your package with bower init .
Then save new dependencies to your bower.json with bower install PACKAGE —save
Use packages
How you use packages is up to you. We recommend you use Bower together with Grunt, RequireJS, Yeoman, and lots of other tools or build your own workflow with the API. You can also use the installed packages directly, like this, in the case of jquery :
How to install Bower on Mac using Node and NPM
In this tutorial we will learn to install Bower on Mac using Node and NPM.
Step 1: Install Homebrew
Homebrew is «The missing package manager for macOS». Open terminal and type the following command.
Step 2: Install Node
Now we need to install Node and NPM on Mac using Homebrew. Use the following command in the terminal.
Click here for more details on how to install NodeJS on Mac using Homebrew.
Once Node is installed then type the following command in the terminal to get the version of node.
NPM is the Node Package Manager and it is installed along with Node. So, to check the version of the NPM type the following command.
Step 3: Install Bower
Bower is «A package manager for the web».
To install Bower open terminal and type the following command.
This will install bower globally in your system.
To check which version of bower is installed type the following command in the terminal.
Congratulation! You have successfully installed Bower on your Mac. Have fun coding.
Знакомство с Bower
В настоящее время существует огромное количество фреймворков для разработки. По мере увеличения их количества в одном проекте становится сложно их всех контролировать, как раз для этих целей и существуют менеджеры пакетов. Они упрощают установку сторонних библиотек и обновление зависимостей проекта.
Bower — как раз один из них.
На данный момент Bower — это, наверное, самый популярный менеджер для клиентского javascript. Все, чем занимается Bower — устанавливает пакеты вместе с их зависимостями.
Bower прост в установке, для этого достаточно выполнить в терминале команду:
Теперь вы можете использовать Bower. Например, найти библиотеку с помощью команды: где query — название требуемого пакета.
Для добавления пакета в проект используется команда install. Достаточно указать имя пакета:
save указывает на то, что должен сохранить имя пакета и его версию в файл-манифест — bower.json. Вместо имени также можно указать URL к tar или zip файлу или путь к git репозиторию.
Bower позволяет посмотреть список установленных пакетов:
Чтобы удалить пакет используйте команду uninstall:
Здесь раскрыты не все возможности Bower, но этого вполне достаточно чтобы понять, для чего он нужен и начать его использовать.
Данная статья не подлежит комментированию, поскольку её автор ещё не является полноправным участником сообщества. Вы сможете связаться с автором только после того, как он получит приглашение от кого-либо из участников сообщества. До этого момента его username будет скрыт псевдонимом.
#1 — Bower — подробное руководство
Bower — пакетный менеджер для web. Первое подробное руководство в рунете. Пришло время разобрать bower «по косточкам».
Bower — пакетный менеджер для web
Всем привет! Меня зовут Дмитрий Ковальчук и я представляю вам первый урок в курсе «Bower — подробное руководство». Мы пройдем путь от основ, до лучших практик и продвинутых техник.
Начнём с определения. Bower — это пакетный менеджер для web. У него масса преимуществ и им пользуются если не все, то большинство современных опытных frontend специалистов. Сегодня стыдно не знать Bower и это не просто мэйнстрим. Bower действительно упрощает нам жизнь.
Как установить bower?
Для того, чтобы работать с Bower, у вас должны быть установлены node.js c npm, а также git. Я работаю из консоли git bash в оболочке conemu. Вам, особенно если вы новичок, рекомендую также работать именно в git bash. Если у вас нет git и git bash, то скачайте его с официального сайта git-scm.com
Если вы пользователь windows, не забудьте во время установки перевести radio button в положение «Run Git from the Windows Command Prompt». Таким образом, git автоматически будет добавлен в ваш PATH, что в будущем сэкономит вам силы и сбережет ваши нервы.
Что касается node.js и npm, то тут проверить очень просто:
Если вы вместо версии видите что-то вроде «comand not found», тогда жмите на паузу и идите на официальный сайт nodejs nodejs.org и скачивайте последнюю версию продукта.
Если с git и npm повросов и сомнений больше нет, тогда мы можем преступить к работе.
Давайте теперь установим сам bower
И сразу проверим его версию
Отлично. bower у нас установлен, теперь мы шаг за шагом будем погружаться в особенности работы с ним.
Поиск, инсталляция, обновление и удаление библиотек
Обычно, начинающие разработчики, для того, чтобы скачать какую-либо библиотеку, фреймворк или плагин, лезут в google, находят официальный сайт или репозиторий этого продукта и скачивают необходимые файлы. Вспомните сами, сколько раз вы заходили на jquery.com, чтобы скачать последнюю версию любимой всеми javascript программистами библиотеки?
Кто-то предпочитает хранить самые часто используемые библиотеки в отдельной папочке или копируют из проекта в проект. Работа становится быстрее, но не решается проблема устаривания версии продукта (т.е., когда выйдет новая версия библиотеки, придется опять лезть на официальный сайт).
Некоторые из вас предпочитают подключать библиотеки, используя CDN, т.е. подключают необходимые библиотеки со сторонних хостингов, чтобы увеличить скорость загрузки сайта. И таких разработчиков bower’у есть чем порадовать. Об этом мы еще будем говорить позже.
Bower же позволяет находить, скачивать, обновлять и удалять необходимые библиотеки практически моментально. Вы просто пишите необходимые команды в консоли и Bower делает всю работу за вас.
ПОИСК
Поиск необходимых библиотек мы можем осуществлять на официальном сайте, если пока что сомневаемся, или не привыкли к работе в консоли
Или прямо в консоли. Давайте попробуем найти jquery
Bower install malformed on mac
When running bower install on Mac it fails with:
When viewing the file you can see that indeed there is an extra bracket at the end. It seems that these files are generated by Bower.
It works fine on a couple Ubuntu boxes and the extra bracket is not there so not sure if it is somehow Mac specific.
We’ve tried to reinstall bower and bower cache clean with no luck. Any ideas appreciated.
1 Answer 1
There was a dependency that was referencing an exact version of jquery that was quite old and ended up with multiple versions of jquery downloaded. I fixed the jquery reference in the offending dependency and the problem resolved. I’m not sure why it only broke on one platform.
Not the answer you’re looking for? Browse other questions tagged macos bower or ask your own question.
Related
Hot Network Questions
Subscribe to RSS
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
site design / logo © 2020 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2020.9.18.37632