joseMMsimo

by Jose Manuel Munoz Simo

Installing Bower on Windows 10

What is Bower?

Today I am going to speak you about Bower . What’s that?

Bower is a dependency manager for front-end web developers, which is similar to a package manager but it is not the same. A package manager is used to configure systems, ie to setup your development environment and with this settings you can build many projects. However, a dependency manager is specific to project. You manage all dependencies for project and that dependencies going to be saved on your project. When you start another project you should manage your dependencies again.

Example: In PHP world there is Composer as dependency manager and PEAR as package manager. When using composer all your settings and extensions are for single project where pear settings to setup new extension and library to php core.

In fact, Bower is created solely for the front-end and is optimized with that in mind. The biggest difference is that NPM (which is pretty used in this world) does nested dependency tree (size heavy) while Bower requires a flat dependency tree (puts the burden of dependency resolution on the user).

Installing Bower on Windows

In first time, you should install NodeJS, because Bower is an application created with NodeJS. Download the correct version for your system (x64 for my Windows 10), the v4.4.5 LTS:

Link to NodeJS

It is pretty easy to install NodeJS… Only Next, Next, Next… (don’t fear!):

Also it is necessary to install GIT, because the dependencies packages should be on a GIT repository. In order to install it, the default options are good, but maybe you will prefer change it.

At the same time, when you install NodeJS, NPM will be installed in your system. So, you can open the cmd in your Windows 10 to install Bower (for that, click on “Start” and write “cmd” and press “enter”).

The command to install Bower is: npm install -g bower

Ok, it is done, Bower was installed 🙂 Now, in order to use Bower, it is necessary to create the bower.json (the dependency file of the project) in the root of the project. For my, I am going to create the project called AguilasCity.com (well, it is only an example) in my computer, on the folder C:\wamp\www\AguilasCity.com

In order to access with the cmd of Windows it is necessary to use the “cd” command, and in order to create the dependencies file of the project (bower.json) the command: bower init

In fact, you can update this file, bower.json, which is created in the same root of the project. Later I will update the license and maybe other things, as the name of the project (it is better if you don’t use uppercase).

bower install

For example, if we want to have several depencies as bootstrap, fontawesome and jquery, we will use the command: bower install –save bootstrap fontawesome jquery

#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 — A package manager for the web

..psst! While Bower is maintained, we recommend yarn and webpack or parcel for new front-end projects!

Bower offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. There are no system wide dependencies, no dependencies are shared between different apps, and the dependency tree is flat.

Bower runs over Git, and is package-agnostic. A packaged component can be made up of any type of asset, and use any type of transport (e.g., AMD, CommonJS, etc.).

View complete docs on bower.io

Install

Bower depends on Node.js and npm. Also make sure that git is installed as some bower packages require it to be fetched and installed.

Usage

See complete command line reference at bower.io/docs/api/

Installing packages and dependencies

Using packages

We discourage using bower components statically for performance and security reasons (if component has an upload.php file that is not ignored, that can be easily exploited to do malicious stuff).

The best approach is to process components installed by bower with build tool (like Grunt or gulp), and serve them concatenated or using a module loader (like RequireJS).

Uninstalling packages

To uninstall a locally installed package:

prezto and oh-my-zsh users

On prezto or oh-my-zsh , do not forget to alias bower=’noglob bower’ or bower install jquery\#1.9.1

Never run Bower with sudo

Bower is a user command; there is no need to execute it with superuser permissions.

Windows users

To use Bower on Windows, you must install Git for Windows correctly. Be sure to check the options shown below:

Note that if you use TortoiseGit and if Bower keeps asking for your SSH password, you should add the following environment variable: GIT_SSH — C:\Program Files\TortoiseGit\bin\TortoisePlink.exe . Adjust the TortoisePlink path if needed.

Ubuntu users

To use Bower on Ubuntu, you might need to link nodejs executable to node :

Configuration

Bower can be configured using JSON in a .bowerrc file. Read over available options at bower.io/docs/config.

Support

You can ask questions on following channels in order:

Contributing

We welcome contributions of all kinds from anyone. Please take a moment to review the guidelines for contributing.

Note that on Windows for tests to pass you need to configure Git before cloning:

Backers

Support us with a monthly donation and help us continue our activities. [Become a backer]

Sponsors

Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]

License

Copyright (c) 2012-present Twitter and other contributors