I'm reading through the below link to try and figure out Assetic:
http://symfony.com/doc/current/cookbook/assetic/asset_management.html
It sounds very good but I'm trying to understand how it works and I can't find any information about how it would handle duplicate third party sources across different bundles. For example, if different bundles which all called the bootstrap js/css scripts as below - would the final consolidated file have multiple copies of each?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
Assetic doesn't manage CSS/JS files that are loaded remotely, it only manages the CSS/JS files that you store locally in your project. So there won't be any consolidation on those. You wouldn't want that consolidation anyway because those 3rd-party files on CDNs will be cached on a user's device and load from that cache without having to download every time.
Related
I am trying to make my first website. I am using Django for it. I have a question related to the inclusion of css/js from Bootstrap.
What is the difference between installing it and linking it using BootstrapCDN?
What happens if that link is no longer accessible? Will it affect the website?
Can't I just include those files in statics directory?
I have this in base.hml file of my app:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="{% static 'flatly.css' %}">
<link rel="stylesheet" href="{% static 'main.css' %}">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
The main point and reason for using CDNs for loading any files (not just Bootstrap files) as opposed to hosting those files on your server is SPEED!
CDNs can drastically increase the speed/performance of your website.
That is because of 2 things:
CDNs allow more files to be loaded in parallel i.e. at the same time! While if you host the same files on your own server, they will be loaded one after the other and depending on how many files (including image files etc.) your web page has to load, that alone can make a huge difference in performance.
Files that are used on MANY websites (such as Bootstrap files for example) are already cached in the browser of your website visitors! So, they don't have to load them at all which is an even greater gain in speed/performance. This assumes that you are using CDNs that are used by thousands or hundreds of thousands of websites to load the same files (because the browser will only use cached files if the URL/path to those files on your website is identical to the CDN URLs that another website, previously visited by the user, also uses).
Also, you can include a small piece of JavaScript or jQuery that checks whether or not the external CDN file is available and if the CDN happens to be down for some reason, then and ONLY THEN that piece of JavaScript would load the corresponding files from your local server.
A quick answer: you can use both it won't affect "link is no longer accessible" don't worry those are official CDN's and most of the people uses cdn for those css and js.
So first way is that you include all the static files from your own domain (localhost or static storage) in this case all the request for those static files will be handled by your server. If you are using localhost it won't affect you much but when you host it on server it will drain a little bandwidth traffic of your server.
On the other hand if you use cdn then you will save space as well as bandwidth of your server
Currently in my Grails app, I have all my CSS/JSS inside web-app/css and web-app/js respectively, and I refer to them in my GSPs like so:
<link rel="stylesheet" type="text/css" href="<g:resource dir="css" file="myapp.css" />">
<script src="<g:resource dir="js" file="myapp.js" />"></script>
I am trying to convert these over to use asset-pipeline.
So I added compile ":asset-pipeline:1.8.11" to my BuildConfig#plugins section, and then moved my CSS/JS files into their appropriate places in grails-app/assets. I leave the <g:resource> tags in place. When the server starts, my app is styled completely wrong, and it is obvious that Grails can't find my CSS/JS files in their new location.
What do I need to do to make this conversion complete & correct?
You can use the asset pipeline taglibs:
<asset:stylesheet src="myapp.css" />
<asset:javascript src="myapp.js" />
This will look in the grails-app/assets/stylesheets and javascripts to find your resource files.
If you would still rather grab the relative path, you need to use the asset pipeline methods to do so.
The Asset Pipeline can change the path when deployed:
For example, in the Development environment, none of the resources are minified and combined and the path is something like YOUR_APP/assets/myapp.js .
In the production environment the path would change to just YOUR_APP/assets/SOME_HASH_OF_YOUR_MINIFIED_ASSET
So to get Asset Pipeline to tell you the path use:
${asset.assetPath(src: 'myapp.js')}
${asset.assetPath(src: 'myapp.css')}
Letting Asset Pipeline compute the path allows greater flexibility when deploying. For example, if you host an application in the cloud, you could specify a specific CDN (like CloudFront from AWS) to serve your static assets with a simple config change in Config.groovy.
I am using web yeoman.
In my applications index.html file I have this script includes.
I would like to know what these <!-- build:js ... --> mean and from which tool they originate?
I would also be grateful about any source link.
My problem is that I plan a very modularized angularjs app and I do not want to manually add 200 .js files to this index.html file.
Maybe this can be configured that during compiling those script entries can be copied over with a clever algo depending on my app folder structure...
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/services/factory1.js"></script>
<!-- endbuild -->
The build blocks are from grunt-usemin. It will not automatically scan and add files from a directory.
You can use a task like grunt-include-source to prep the HTML with the files from your scripts directory tree and then run usemin to concat and uglify them.
The grunt-include-source github page (linked in the last paragraph) contains examples of Gruntfile configurations to update the HTML. Your main challenge will be the src to dest juggle as the HTML is updated by multiple tasks. In the scope of things, compared to dealing with 200+ files, that should still be easier. The downside, of course, is that if you have any orphan files in your list of 200+...they will still get included and sent.
You can also see these StackOverflow questions where similar questions have been asked:
can grunt automatically include all my js in index.html?
How to include scripts automatically in a yeoman/grunt project?
Ok so I work for a company that uses Bootstrap and less css. Right now for each client they include all our "core" less files that dont change along with the less files that are only for that customer. We want to clean this up and have a central location for the "core" files and then in each client folder all we have are the 2-3 less files that are only for the client.
Can bootstrap compile less from multiple locations?
This is structure as to what we have now and what we want.
What we have now:
Client 1:
Customer Less files
"Core" less files
Client 2:
Customer Less files
"Core" less files
Client 3:
Customer Less files
"Core" less files
What we want:
"Core" less files
Client 1:
Customer Less files
Client 2:
Customer Less files
Client 3:
Customer Less files
Hope this makes sense. Thanks
I expect your question is about client side compiling of your less code (see: http://lesscss.org/#client-side-usage).
When using the less.js client side compiler you can include more than one file:
<link rel="stylesheet/less" type="text/css" href="core.less">
<link rel="stylesheet/less" type="text/css" href="client.less">
<script src="js/less.js" type="text/javascript"></script>
When you move core.less in the above situation to an other domain:
<link rel="stylesheet/less" type="text/css" href="http://yourdomain.com/core.less">
You will end up in a cross domain issue in the first. This can be fixed by enabeling CORS, see: http://enable-cors.org/. On the domain where core.less has been installed, the server should send an Access-Control-Allow-Origin: * header.
less.js loads the less files with a XMLHttpRequests which supports CORS for most modern browsers see http://caniuse.com/#search=cors. More details can be found at http://www.html5rocks.com/en/tutorials/cors/
Notice that the less.js compiler compiles each file independent from each other in a different scope. So the client.less file in this example can not use mixins and variable defined in core.less.
Please also notice that you should not use client side compiling for production in most cases because of performance issues.
I have Less CSS working with my Django site in local development. Everything looks fine. I'm including the files as follows:
<link rel="stylesheet/less" type="text/css" href="{{ STATIC_URL }}less/base.less">
<script src="{{ STATIC_URL }}js/less-1.1.3.min.js" type="text/javascript"></script>
However, when I deploy the project to Heroku, Less CSS inexplicably doesn't work. What do I have wrong?
I know for a fact that I have static media set up properly: I can download base.less and less-1.1.3.min.js from the correct paths just fine.
Note: I realize that it's best to compile and minify my .less files for production, but this is just a staging server for development purposes.
Note 2: If you know how to add compilation of Less CSS to the Heroku deployment process, without having to install node.js, I'd be interested in learning how to do that in addition to my main question..
The problem is that less.js loads the .less stylesheets through XHR, which doesn't work unless you set the appropriate Access-Control-Allow-Origin header, which S3 doesn't permit (https://forums.aws.amazon.com/thread.jspa?threadID=34281).
As a workaround some people have suggested setting up an HTTP Proxy, which adds the necessary header. (http://motoole.com/2011/10/19/hosting-font-face-fonts-on-s3.html) and (http://zefer.posterous.com/pure-html-ajax-solutions-to-upload-files-to-s)
Otherwise, you're going to have to compile the .less files to CSS, as less.js isn't going to work.
Of course, another alternative (which I use), is to simply deploy the static files to an Apache server, and not host them in S3.
Take a look at https://github.com/nigma/heroku-django-cookbook
It makes use of the post_compile hook provided by heroku-buildpack-python to install nodejs and lessc.