I'm searching for days now for a proper way to serve the static content for my Laravel 4 website in a most optimal speed performance way. What I tend to obtain is serving only the needed JS and CSS, already minified to each requested page.
Example:
page1.html
-> styles.css - for this page it includes bootstrap.css, jquery-ui, selectize.css, google-custom-maps.css
-> scripts.js - for this page it includes boostrap.js, jquery.js, selectize.ks, google-custom-maps.js
page2.html
-> styles.css - for this page it includes only bootstrap.css
-> scripts.js - for this page it includes boostrap.js
Currently I have all my plugins installed with bower and using gulp tasks I managed to minify all the less, css and js scripts at once, the only problem is I don't know If it is possible to serve only the needed files for a custom page.
In my opinion an optimal solution would be that in each view.blade.php file i provide all the needed assests using
{{ asset('front/css/bootstrap.css') }}
{{ asset('front/css/jquery.css') }}
{{ asset('front/css/selectize.css') }}
And at first run this is compiled and cached. Is there any package that can do that?
I have been always using template system where I include all the needed files in one place and other blade.php files extend this template.
Related
I'm building a static website,
I have downloaded some template just get things started.
There are three main JS files in this template:
jquery.js
plugins.js
functions.js
They are loaded in the index.html file in that order.
I would like to use webpack for production.
I have created a new file: index.js and in that file, used require to load these files
require('jquery.js')
require('plugins.js')
require('functions.js')
This is not working because of probably scope issues, plugins.js for example doesn't know about jquery and so on.
I can move all the plugins from plugins.js to package.json and have it downloaded to node_modules and use it from there, but because it's a static website and just a FE to my app, I don't care much about updates to its packages (and another reason, there are a lot of plugins there...).
How can I make jquery.js and plugins.js symbols to be seen by functions.js?
Thanks
I have a website I'm working on in Visual Studio 2013 and I'm mainly using AngularJS 1.2.6. In my index.html I have a src line for each .js file which for 3 page is 6 lines, 1 js file for each controller and 1 js page for each view.
Is there a way I could consolidate all of these lines into 1 .js file and call that .js file in my index.html?
Yes, you can use something like grunt.js to build a custom build script for your .js files. In your case, you may want to use grunt-contrib-concat with grunt-contrib-watch.
If you are not familiar with grunt, feel free to read the tutorial.
What is templates/system directory in Joomla 1.5? Is it system template or common directory for all templates? May I put some javascript widgets there?
templates/system directory in Joomla 1.5 is not a complete template which you can apply likewise other templates - beez or ja_purity.
If you place the templateDetails.xml file in the system directory, it will also be listed in the template manager and you can make this template as default too. But, this template is almost blank. Styles and images are very less. index.php file in this template is just including component.php file which is just importing css only.
Hope this clarify your doubts. :)
I searched over the internet but I could not find an answer to my question. I am just trying to figure out a clean way to structure my CSS and JS files inside my project. Let us say for example I have a CSS folder and I have a custom my.css file and also I have a Scripts folder and I have inside it a myscript.js. I understand that my.css will go in the CSS folder and myscript.js will go under the Scripts folder in this folder setup :
root
css
my.css
Scripts
myscript.js
My question is, if I want to use a jQuery plugin like jstree for example. This library require me to add one js and one css file. Should I keep these files under the Scripts and CSS folder ?
Plan A
root
css
my.css
jstree.css
Scripts
myscript.js
jstree.js
Or should I separate them into a different folder for cleaner structure like this
PLan B
root
css
jstreeFolder ---> jstree.css
my.css
Scripts
jstreFolder ---> jstree.js
myscript.js
Is this structure acceptable? Any standard ways for achieving this ?
Any help is appreciated.
Root
-- styles
|-- your_file.css
-- scripts
|-- your_file.js
-- libs (or plugins)
|-- jquery
|-- jquery-ui
...
I think this structure will be nicer and all the third party libraries (no matter css or javascript libs) that you've chosen should be located under libs directory. It will make maintenance be easier and clear.
For mainentance reasons i prefer another approach. The library jstreee organise the javascript files, css-files and images in a certain way.
/libs/
/jstree/ // <-- folder
/themes/ <-- folder
/default/ <-- folder
style.css
32px.png
jstree.js
jstree.search.js
/other-plugin/
I put everything under libs and in a folder with the name of the library. This way the external dependency of a library is clear and the internal path structure (css files may point to images) of the external library is untouched.
I would create a CoreBundle, and use this for your template layout, base template, etc.. and do your includes there.
Furthermore if you leave it in the app/Resources making a new directory for Public/css to my knowledge it wont get pulled down when you install/dump your assets to the /Web directory. So if by chance you happen to be only using those files on your live production server, and or like to use that directory as your normal include path, then it just makes more sense.
Also, for me, i use less, and the less files arent compiling and shipping the compiled version into the /web folder either.
If you make a core bundle, you can have all this natively, and have your files in an area that your more likely to be used to getting into with your file editors.
It also helps separate custom files away from the core framework better.
As a sidenote, i did like fsehat's suggestion, however i was a bit disappointed when the assets werent being handled properly. also i dont like using ../ in include paths, ./ is ok, but not ../
if you put them in a bundle (/Your/Bundle/Public/css), after compiling, you can just call them from your templates like this for e.g. <link href="{{ asset('/css/loader.css') }}" rel="stylesheet" media="screen">
Possible dublicate of Symfony 2 - Working with assets.
For example, You need to store your styles in src/YourBundle/Resources/public/css
Use next command for assets CSS
php app/console assets:install web
Styles will be copy to web/bundles/YourBundle/css dir. And now you can asset them easy in templates
Put your css js in web folder like directory
C:\wamp\www\yourProject\web\bundles\acmedemo\css\
And use it using
<link rel="stylesheet" href="{{ asset('bundles/acmedemo/css/mystyle.css') }}" type="text/css" />
Sure, You will share your javascripts and stylesheets between your bundles, you need to visit following URL and follow the step:
With Assetic / Twig / Symfony2, can I define front end libraries?
Symfony2: How to share js libs and css between bundles