Bower is a frontend asset management tool. It can manage frontend javascript, Html, CSS, images files .etc. It is similar to NPM. This article will tell you how to use bower to manage frontend assets with an example.
1. How To Install Bower.
- Bower itself is also an NPM package, so you can run the command npm install -g bower to install it globally.
> npm install -g bower added 1 package, and audited 2 packages in 9s found 0 vulnerabilities
- Run the command npm list -g bower to confirm bower is installed successfully.
> npm list -g bower C:\Users\zhaosong\AppData\Roaming\npm `-- [email protected]
- Run the command bower -v to see the installed bower version.
> bower -v 1.8.14
2. How To Use Bower To Install/Uninstall Front End Component.
- If you want to record the local bower components that you have installed, you can run the command bower init to create a bower.json file in the current directory.
> bower init ? name browserify ? description ? main file index.js ? keywords ? authors zhaosong <[email protected]> ? license ISC ? homepage ? set currently installed components as dependencies? Yes ? add commonly ignored files to ignore list? Yes ? would you like to mark this package as private which prevents it from being accidentally published to the registry? No { name: 'browserify', description: '', main: 'index.js', authors: [ 'zhaosong <[email protected]>' ], license: 'ISC', homepage: '', ignore: [ '**/.*', 'node_modules', 'bower_components', 'test', 'tests' ] } ? Looks good? Yes > dir ...... -a---- 6/3/2022 4:40 PM 269 bower.json ......
- Then run the command bower install <component-name> –save-dev to install the component in the current directory and save the component info in the bower.json file.
> bower install phaser --save-dev bower phaser#* not-cached https://github.com/photonstorm/phaser.git#* bower phaser#* resolve https://github.com/photonstorm/phaser.git#* bower phaser#* ECMDERR Failed to execute "git ls-remote --tags --heads https://github.com/photonstorm/phaser.git", exit code of #128 fatal: unable to access 'https://github.com/photonstorm/phaser.git/': OpenSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github.com:443 Additional error details: fatal: unable to access 'https://github.com/photonstorm/phaser.git/': OpenSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github.com:443
- If you meet the above error, you can run the command bower search keyword to search its URL where it is saved.
- For example, we run the command bower search phaser to search the phaser component and it’s saved URL.
> bower search phaser Search results: phaser https://github.com/photonstorm/phaser.git phaser-official https://github.com/photonstorm/phaser.git phaser-utils https://github.com/webcaetano/phaser-utils.git ......
- Then you can run the command bower install <component-saved-url> –save-dev to install it.
> bower install https://github.com/photonstorm/phaser.git --save-dev bower phaser#* not-cached https://github.com/photonstorm/phaser.git#* bower phaser#* resolve https://github.com/photonstorm/phaser.git#* bower phaser#* download https://github.com/photonstorm/phaser/archive/v3.55.2.tar.gz bower phaser#* retry Download of https://github.com/photonstorm/phaser/archive/v3.55.2.tar.gz failed with ETIMEDOUT, retrying in 1.9s bower phaser#* retry Download of https://github.com/photonstorm/phaser/archive/v3.55.2.tar.gz failed with ETIMEDOUT, retrying in 3.2s bower phaser#* extract archive.tar.gz bower phaser#* resolved https://github.com/photonstorm/phaser.git#3.55.2 bower phaser#^3.55.2 install phaser#3.55.2 phaser#3.55.2 bower_components\phaser
- After you installed the bower component in the current directory successfully you can run the command bower list <component-name> in the current directory to confirm the installation. You should run the command in the parent directory of the bower_components folder.
> dir ...... d----- 6/3/2022 4:50 PM bower_components ...... -a---- 6/3/2022 4:50 PM 363 bower.json ...... PS D:\Work\dev2qa.com-example-code\PythonExampleProject\html\browserify-example> bower list phaser bower check-new Checking for new versions of the project dependencies... browserify D:\Work\dev2qa.com-example-code\PythonExampleProject\html\browserify-example └── phaser#3.55.2 (3.60.0-beta.8 available)
- You can also open the bower.json file to see it’s updated content.
{ "name": "browserify", "description": "", "main": "index.js", "authors": [ "zhaosong <[email protected]>" ], "license": "ISC", "homepage": "", "ignore": [ "**/.*", "node_modules", "bower_components", "test", "tests" ], "devDependencies": { "phaser": "https://github.com/photonstorm/phaser.git#^3.55.2" } } - There is also a directory \bower_components\phaser created in the current directory.
- If you want to uninstall the bower component from the current directory, you can run the command bower uninstall <component name> in the terminal like below.
> bower uninstall phaser bower uninstall phaser browserify-example> bower list phaser bower check-new Checking for new versions of the project dependencies... browserify D:\Work\dev2qa.com-example-code\PythonExampleProject\html\browserify-example └── phaser not installed
- You can run the command bower -h to list all the bower command optional parameters.
