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
Related
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.
I need to:
Copy index.html to index.uncompressed.html
Change some the references in index.html from .js to .min.js (i.e. my_jsfile.js to my_jsfile.min.js)
3) Minify index.html
I am using Grunt.
Number 3 is no problem.
I assume number 1 will be easy.
For number 2, I was planning on using some sort of Grunt editing plugin and changing all .js file references between <!-- Start Here --> and <!-- End here --> from my_jsfile.js to my_jsfile.min.js.
Is this the way this type of thing is done?
The resource I use in this situation is grunt-processhtml, which will do exactly what you're looking for. Check out one of my repos, steady-backbone-boilerplate, where I use this to do exactly what you're describing.
In particular, I find this is a helpful example:
<!-- build:[src] js/source.min.js -->
<script data-main="js/main" src="js/vendor/require.js"></script>
<!-- /build -->
So, in development we're using the requirejs script to load all our dependencies. In our production index.html file, we're loading the source js file, which has been minified with the grunt-requirejs module.
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 am using git (via GitHub) for version control on my projects. I'm still new to this but I'd like to know best practice for how to keep my css and js files synchronized between environments.
Example: Let's say I write a js script on dev. I'm happy with my work and I push to testing. Well on testing I would want a minified/compressed version. How would I accomplish that without a lot of overhead tasking? What do you guys do? I'm assuming it's part of some sort of deploy script that would compress the code and push it to whatever environment I specify.
This brings up another question: What about my header (and/or footer) file(s) in my project? If my dev has:
<link rel="stylesheet" href="<?php echo base_url(); ?>css/main.css">
and my testing has:
<link rel="stylesheet" href="<?php echo base_url(); ?>css/main.min.css">
That's all fine, but what if I need to make changes to my header? How would I separate all these things from each other? If I make changes to my header and push to testing or production I would lose the .min from that include line.
Currently what I do to deploy updates is just a simple git pull origin [branch] from the command line inside the environment I want to update.
Again, I'm looking for best practice, whatever learning it requires. Thanks!
You might want to check out preprocessor tools, such as LESS or Sass. These tools allow you to write CSS (I believe they may be able to handle JS, too, for purposes of minifying), and set up scripts that handle how they compile the code, based on the environment.
What you'd do, then, is write your code in "source" files, and set up the preprocesser to compile the code according to settings laid out in a settings file (for Sass, this is easily done with the Compass framework), based on the environment you're in. You'd then keep only the source files in the repository (set Git to ignore the compiled versions), and set up post-receive hooks to compile the source files on the server. Your HTML can then be written to access the compiled files (which should have the same name across environments), so you don't have to write logic that determines on the fly, every time, what environment the code is running in.
Don't put minified version of CSS, JS into version control. That's duplicate.
Git can be used on delopy but its purpose is not deploy.
For the including CSS tags, that's easy. A quick roundup is use your framework's env vairable. As I know CodeIgniter has this function. If env == test, include minified version, if not, include raw versions.
Besides you need a build script or framework plugin to generate minified versions automatically.
Typically a minified file is generated by your CMS on page load. So from a code standpoint you don't need to track the minified version as all the code is tracked in your actual js and css files. So minified copies can just be ignored using the .gitignore file.
My .gitignore file typically looks like:
css-min #directory to store generated minified css files
js-min #directory to store generated minified js files
tmp #directory to store temporary files
files/images/cache #directory for storing generated images such as thumbnails
settings.php #File that stores system variables.
The settings file is used to set global variables such as your platform like "dev", "staging", "production". Then in your other files you can check the platform as to which css/js files to use. Since that file is ignored by your repository you can make the settings specific to each platform.
if ($GLOBAL['platform'] = PLATFORM_DEV) {
$path = 'css/main.css';
}
elseif ($GLOBAL['platform'] = PLATFORM_STAGE) {
$path = 'css-min/main.min.css';
}
<link rel="stylesheet" href="<?php print base_url(); print $path; ?>">
So I have just begun learning the Django framework, and I am trying to make a basic application using AJAX to load Django responses into my main 'Content' div. So far so good, but one issue I am having is referencing JS/CSS files. All I want is a link to one CSS file, and one JS file in my main index page.
What I am hoping to do is add a reference to style/main.css and js/main.js in my application's urls.py script, where python would return the contents of the file. So, a standard <link src='style/main.css' ... /> tag would receive the contents of the appropriate file.
Thanks.
Read the documentation on serving static files. Essentially, you can use Django to serve these files during development, but should definitely configure your web server (e.g. Apache) to serve them directly in your production environment.
Setup "django.contrib.staticfiles" properly.
Add your link and script tags to your template using your STATIC_URL setting.
<link href="{{ STATIC_URL }}css/main.css"/>
<script src="{{ STATIC_URL }}js/main.js"></script>
https://docs.djangoproject.com/en/1.3/ref/contrib/staticfiles/
You can try these steps:
open your settings.py and
-add this at the first line of your file:
import os.path
-change your STATIC_ROOT's value to:
STATIC_ROOT = os.path.join(PROJECT_DIR, 'static/')
-change your STATIC_URL's value to:
STATIC_URL = '/static/'
create a folder named "static" in your project root.
create a folder for your static files like css, javascript and etc. I recommend you use a different folder for different types of files.
open the urls.py of your project
-add this to your imports: import settings
-add this to the url patterns:
(r'(?:.*?/)?(?P(css|jquery|jscripts|images)/.+)$', 'django.views.static.serve', {'document_root': settings.STATIC_ROOT }),
NOTE: In this example, there are folders named css, jquery, jscripts and images inside my static folder.
In your template add this:
for css files: (in this example, default.css is the name of the css file)
<link href="/{{ STATIC_ROOT }}css/default.css" rel="stylesheet" type="text/css" media="all" />
for javascript:
<script type="text/javascript" src="/{{ STATIC_ROOT }}jquery/jquery.js"></script>