I use Bower to manage dependencies in the form of Sass and JavaScript libraries. In almost all cases I reference these libraries directly from my Sass, CoffeeScript and JavaScript.
My build process concatenates and compresses the resultant assets. These combined stylesheets and JavaScripts also have sourcemaps. With the Bower-managed libraries coming straight from the bower_components directory, the sourcemaps create a dependency on having the bower_components directory publicly available.
When considering Bower alone, it's obvious that bower_components should be ignored by version control and referenced directly, but when adding the sourcemap aspect it starts to get a little blurry for me.
On the particular project I'm working on now I check compiled assets into version control to avoid having to compile them on Heroku. This might even try to force me to check the whole bower_components directory in. Yuck.
Thanks in advance if anyone has advice.
Related
I don't have much experience with new npm/yarn/webpacker crazyness in Rails 5. So what's the correct way to bundle assets plus their dependencies (like bootstrap 4, for example).
Before it was just a matter of moving entire downloaded js library in /assets and calling it a day.
Let's assume I want to include this datepicker in my Engine: https://github.com/chmln/flatpickr
How do I set it up? Thanks.
Did you get anywhere with this?
It seems there needs to be a solution where the host application can pull dependancies from an engines or gems YARN package.json.
That way it could merge all YARN dependancies together with its own and check if there are no conflicts, if not - Happy days.
A possible workaround is to copy the dependancies over from node_modules into the asset pipeline. This is pretty much the same as what was done previously apart from now rather than looking through each file to find the dependancies and there versions you can just look in package.json.
I can see in my myproject\node_modules modules(not all) which get normal .js code and .min.js versions:
For example jsonpath
After running the packager I get the same two files in the myproject-win32-ia32\node_modules\jsonpath folder.
So my question is: Is there anyway of saying to the packager (or other utility I could run before packaging)to keep only the minified (or the original) if both exist
I find not so good to keep both versions, the installed package at the end is bigger than it should be for nothing....
I've recently started using Bower and something I cannot figure out is what would be the correct way of editing a package? For example I use SwiperJS but a lot of the CSS that it comes with just isn't relevant for my output so I've been commenting it out so when it's compiled with SASS it gets removed. I've been doing this without Bower.
If I was to install SwiperJS using Bower instead, what would be the best way to do the same thing? I assume just ending the files in the bower_components directory isn't best.
Also I'm just using SwiperJS as an example here.
I have installed into a new project in codekit the following components:
jquery
animate.css
normalize
Modernizer
I understand that keeping these components in the bower directory is recommended so these files are easily updated. However, do we link to these in our html files directly? My sass files get compiled and outputted to assets/css but there aren't any sass files in the bower components and creating them in the original folder would, I assume, get overridden if I was to upgrade. Seems very odd to me to upload the entire bower_components file to the production server with all the dependent files. I have been building site for a long time without all this node, git, grunt, bower, et al stuff. I see the value in it, but I'm having a tough time getting up to speed. Any help sure would be appreciated.
In most cases, you would want to include the third-party components (e.g. css, javascript, ... files) within your own master css or javascript file and then minimize that file for production. For example, my folder structure looks like:
bower_components/
...
release/
css/
styles.min.css
img/
...
js/
scripts.min.js
src/
images/
...
scripts/
scripts.js
styles/
styles.less
templates/
...
And then, within styles.less, I might have:
#import (less) "../../bower_components/normalize-css/normalize.css";
Or within scripts.js I could have:
//#codekit-prepend "../../bower_components/jquery/dist/jquery.js"
I have CodeKit set to generate the minified versions in release/ from those files. The only files that go to production are all of the files in the release/ folder.
I would like to use the SlickGrid plugin in my Rails 3 application.
I contains several JS and CSS files that I should include in my HTML page.
It is possible to put all the needed JS files in the public/javascripts directory and all the CSS files in the public/stylesheets directory. However, I don't like this solution because it breaks the plugin package files structure.
I would like to put all the plugin files in one place (I thought about vendor/plugins, is it a better place?), and include the needed files from there. Is that possible ?
What is the proper way to include the JS and CSS files when integrating a plugin ?
I think Jammit can help you accomplish what you're trying to do. Besides packaging, embedding, gzipping your assets, it also allows you to store javascript and stylesheets anywhere in your app. Images (if not embedded) could be a problem though.
Answer by #rubiii is also good, but since sprockets gem from version 2.10.0 supports bower, now it is extremely easy to integrate any js/css libraries. Also version management and updating as easy as typing bower install. Bower can be installed through nodejs npm install -g bower, include .bowerrc file in root of application with content inside:
{
"directory": "vendor/assets/components"
}
Then specify libraries in bower.json and run bower install
{
"name": "appName",
"version": "0.0.0",
"dependencies": {
"bootstrap": "~3.0.0",
}
}
After components installed, require files in application.js/application.css as usually. e.g.
*= require bootstrap