How would I go about installing 2 versions of jQuery using bower? I want to have v2.0 as well as 1.9.1 for browser support fallback
The issue I'm having is that if you run bower install jquery#1.9.1 jquery#2.0.0 the first version gets overwritten by the second because they are the same component
According to the bower docs
Bower offers several ways to install packages:
# Using the dependencies listed in the current directory's bower.json
bower install
# Using a local or remote package
bower install <package>
# Using a specific version of a package
bower install <package>#<version>
# Using a different name and a specific version of a package
bower install <name>=<package>#<version>
You can install two different versions of jQuery like so:
bower install jquery-legacy=jquery#1.10 jquery-modern=jquery#2
Or, if you prefer to set that up in a bower.json
"dependencies": {
"jquery-legacy": "jquery#1.10",
"jquery-modern": "jquery#2"
}
In the dependencies part of your bower.json you can have something like this:
"dependencies": {
"jquery": "2.0.0",
"jquery-1.9.1": "http://code.jquery.com/jquery-1.9.1.js"
}
One shouldn't normally have to do this, but sometimes you have to maintain / migrate an existing website that (for whatever reason) uses different versions of jquery in different pages!
From the command line, if you just want the latest 1.x and 2.x versions, you can loosen the constraints in the answer above.
So:
bower install jquery-legacy=jquery#1.10 jquery-modern=jquery#2
would become:
bower install jquery-legacy=jquery#^1 jquery-modern=jquery
bower.json:
This is how i did it...
"dependencies": {
...
"jquery": "2.0.0",
"jquery-old": "1.9.1"
...
}
Second version, can be any version, old or new. You just have to add a different key. Like jquery-old
Install
bower install --save jquery-old
Use
Now you can use either one of the jquery version:
<script type="text/javascript" src="path/to/bower/directory/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="path/to/bower/directory/jquery-old/dist/jquery.min.js"></script>
Bonus
"dependencies": {
...
"jquery": "2.0.0",
"jquery-old": "1.9.1"
"jquery-latest": "^3.3.1"
...
}
Related
I am starting a new Laravel project with v5.2 and I would like to use Zurb Foundation v6.2.
I've seen that Zurb Foundation can be installed through composer and since I've installed Laravel through composer, I thought it as a good idea.
I did it, Foundation is in the vendor (vendor/zurb/foundation) folder.
It has also been added to the composer.json:
"require": {
"php": ">=5.5.9",
"laravel/framework": "5.2.*",
"zurb/foundation": "^6.1"
},
But now, how can I use it? Where should I create my css file(s)? In the resources/assets/sass folder where Laravel already provides a scss file (app.scss)? If so, how can I link it to Zurb Foundation?
Thanks a lot for your help.
I think Laravel Elixir is more suitable for this purpose.
From the guide:
Installing Node
Before triggering Elixir, you must first ensure that Node.js is installed on your machine.
node -v
By default, Laravel Homestead includes everything you need; however, if you aren't using Vagrant, then you can easily install Node by visiting their download page. Don't worry, it's quick and easy!
Gulp
Next, you'll want to pull in Gulp as a global NPM package like so:
npm install --global gulp
Laravel Elixir
The only remaining step is to install Elixir! With a new install of Laravel, you'll find a package.json file in the root. Think of this like your composer.json file, except it defines Node dependencies instead of PHP. You may install the dependencies it references by running:
npm install
Then to install Foundation 6 for Sites it's recommended to use Bower, (another) package manager, but specifically for managing frontend facing libraries like Foundation and jQuery.
You can have a look at Zurb's example template for better understanding.
npm install --global bower
Create a file named bower.json:
{
"name": "my-site",
"dependencies": {
"foundation-sites": "~6.1.2",
"motion-ui": "~1.1.0",
"foundation-sites": "~6.2.0",
"motion-ui": "~1.2.2"
},
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"private": true
}
Then run bower install.
In app.scss, import Foundation:
#import 'foundation';
#include foundation-everything;
Then in gulpfile.js, compile it to CSS:
mix.sass('app.scss', 'public/css/app.css', {
includePaths: [
'bower_components/foundation-sites/scss/'
]
});
Finally to compile, run:
gulp
I think npm way is better suited for front-end stuffs. Take a look at this:
http://somethingnewtutorial.blogspot.com/2017/07/using-foundation-6-with-laravel-5.html
If you are using earlier version, its just using gulp instead of laravel-mix.
I'm just starting to use Bower, and it's really useful, but one thing I don't understand how to do is something similar to Composer: updating/deleting your dependencies based on the json file.
So, in composer, if I have something like:
"require": {
...
"sonata-project/core-bundle": "^2.3",
"sonata-project/block-bundle": "^2.3.8",
"sonata-project/admin-bundle": "dev-master",
"sonata-project/doctrine-orm-admin-bundle": "^2.3"
},
And if I delete one dependency's line(or more) and run
composer update
This will not only update any of the outdated dependencies, but also delete the folders corresponding to the deleted dependencies.
How can I achieve the same in Bower? Is there a similar command or combinations of commands, eventually?
I've tried
bower update
But that just updades the dependencies.
I've also tried
bower uninstall "dependency"
But this works only for one, and doesn't automatically detect what I have and what I don't, like in Composer's case.
The thing you're looking for is
bower prune
You can also do
bower uninstall package1 package2 --save --save-dev
Is it possible to use Bourbon and it's additional components without needing to have Ruby installed? We'd like to experiment on a small project, but it's a pain to get dependencies approved by the desktop engineering folks.
I've noticed that there are Bower packages for all but Bitters. Can I just grab the scss files from GitHub and wire things up manually?
Seems the devs don't want to have bitters on bower: https://github.com/thoughtbot/bitters/issues/22.
That said, you can get bitters with bower if you use a zipball from git as a version (e.g. https://github.com/thoughtbot/bitters/archive/master.zip).
If you want more control on how to bring those files in your project, gulp-bower-normalize can help — an example bower.json file:
{
"name": "project-x",
"dependencies": {
"bitters": "https://github.com/thoughtbot/bitters/archive/master.zip",
},
"overrides": {
"bitters": {
"main": [
"app/assets/stylesheets/*.scss"
],
"normalize": {
"css/base": "**/*.scss"
}
}
}
}
Had this same question recently as I'm using Bourbon/Neat in a static site project. I've found that the 'bourbon' and 'neat' commands do nothing more that replicate the hierarchy of library files into your project directory. At that point you can use the libraries with any workflow which is able to preprocess sass/scss files.
In my case I'm using them successfully with the Python WebAssets library from within Pelican, you might be able to find another sass preprocessor that fits into your setup.
If you can get node installed on your dev machine check out Yeoman. It uses Grunt and Bower to generate a web app that uses Sass. Then you can install Bourbon and Neat using Bower. It does a lot of the heavy lifting for you.
I'm new to composer and Yii2. Already installed yii2 on Windows and now I need to install new bower dependency called bower-asset/angular-material. Added "bower-asset/angular-material": "0.4.2" to composer.json require block and run composer update bower-asset/angular-material. It takes too long time (about 1 hour). Somehow composer read all patches of angular
Reading bower.json of bower-asset/angular (v1.3.0-patch2531)
Reading bower.json of bower-asset/angular (v1.3.0-patch2530)
Reading bower.json of bower-asset/angular (v1.3.0-patch2529)
...
Why it takes too long time? What I need to do?
fxp/composer-asset-plugin >= v1.3:
To skip reading -patch packages, you need just added to composer.json of your project follow config of fxp/composer-asset-plugin:
"config": {
"fxp-asset": {
"pattern-skip-version": "(-build|-patch)"
}
}
Note: also this meaning the -build packages also will be skipped.
fxp/composer-asset-plugin < v1.3:
If you are using fxp/composer-asset-plugin older than version 1.3, you can use follow config:
"extra": {
"asset-pattern-skip-version": "(-build|-patch)"
},
That should work.
Make sure you are running the latest version of Bower. I am currently running v1.2.6 and null works to fetch the latest dependency.
$ bower -v
If you have installed bower globally via npm, then you can update it this way:
$ npm update bower -g
Note: you may need to run that as sudo depending on your file permissions.
Hope this helps.
I'm using three.js and there are a number of useful files under the examples/ directory that I wish to include in my project. Unfortunately, examples/ is listed under the ignore property of the three.js bower.json config file.
Is there a straightforward way to install specific files under examples/ with Bower?
Whole idea that is behind bower is to focus only on main library files.
From my point of view you have options:
use derivative package via npm instead of bower and in your code reference from node_modules directory - for example https://www.npmjs.com/package/three.js
create your own npm package based on npm/bower and use it the same way
There are a few options for your specific case.
Perhaps the easiest for your scenario is to install threejs-examples using bower to get the examples directory. This is best used in combination with threejs-build to ensure consistent versions of threejs.
bower install threejs-build threejs-examples
Alternatively you could install the whole git repository and copy out what you need (may take some time)
bower install mrdoob/three.js
Or you could use a grunt task like grunt-bower which can install only the packages you require by using the packageSpecific and files options.
The following grunt snippet will copy only orbit controls from the examples directory
bower: {
dev: {
dest: 'components/',
options: {
packageSpecific: {
'threejs': {
files: [
'examples/js/controls/OrbitControls.js'
]
}
}
}
}
},