I am using Assetic with Twig but not the symfony2 framework.
Here's how the project is set up
/site
/template
/css
/public_html
/css
The raw css is stored under /site/template/css and I want assetic to minify the css and output it to /public_html/css.
Here's how assetic is set up as a twig extension
$factory = new AssetFactory(//absolute path to `/site/template/`);
$factory->setDefaultOutput(//absolute path to `/public_html/`);
$factory->setDebug(false);
$twig->addExtension(new AsseticExtension($factory));
Then in my template:
{% stylesheets 'css/screen.css' output='css/*' %}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}
I can see that assetic has generated a unique url in the final output:
<link href="css/00da241.css" type="text/css" rel="stylesheet" />
However, if I look in /public_html/css, the files are never generated!
I am using a Windows 7 server with apache and PHP has no issues writing files anywhere.
What could be causing this?
What you've done here is asking assetic to generate URL's to assets (using twig).
But assets urls don't point to any file yet. You still have to generate them, using a dump script:
<?php
use Assetic\AssetWriter;
use Assetic\Extension\Twig\TwigFormulaLoader;
use Assetic\Extension\Twig\TwigResource;
use Assetic\Factory\LazyAssetManager;
$am = new LazyAssetManager($factory);
// enable loading assets from twig templates
$am->setLoader('twig', new TwigFormulaLoader($twig));
// loop through all your templates
foreach ($templates as $template) {
$resource = new TwigResource($twigLoader, $template);
$am->addResource($resource, 'twig');
}
$writer = new AssetWriter('/path/to/web');
$writer->writeManagerAssets($am);
This script uses twig templates to define which files to dump.
You will have to define the $templates variable and the $twig variables of course.
Related
I am facing a strange issue with the Django application on my local, the file is available in the static directory.
The following is in the settings.py
STATIC_ROOT = SITE_ROOT + '/static/'
STATIC_URL = '/static/'
this is how I am trying to include style file
<link href="/static/msc.css?v=1.2" rel="stylesheet" type="text/css" />
the following is added in urls.py
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
urlpatterns += staticfiles_urlpatterns()
The file exist in the static directory, but it is not loading, I am facing a 404 error in console for the URL: http://localhost:8000/static/msc.css?v=1.2
please help me in this regard thanks.
You are not doing things the Django way.
When working with static files in Django
a) you need to use {% load static %} at the very beginning of your template
b) The link to static file is created using the following pattern
<link href="{% static 'path/to/style.css' %}" rel="stylesheet" type="text/css" />
Suppose that I have a directory in my django project static/css/style.css, then
<link href="{% static 'css/style.css' %}" rel="stylesheet" type="text/css" />
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src="/slim/app/views/animations/jquery.min.js"></script>
<script type="text/javascript" src="/slim/app/views/animations/bootstrap.min.js"></script>
<link rel="stylesheet" href="/slim/app/views/animations/bootstrap.min.css">
</head>
<body>
<div class="container">
hello
</div>
</body>
</html>
I have to specify full directory path for loading the js and css files
(jquery.min.js and bootstrp.min.js and bootstrap.min.css).Here i have
(/slim/app/views/animations/) as the directory which contain all the
files. if currently i am in the views directory i should use the
(animations/whatever the file name) but it is not working in these
way. but if i use the full directory path it all works fine. why these
is happening can anyone explain.
(slim) is my root directory where i installed slim
Using Relative paths is not how you typically work with Slim. Your assets (JavaScript/CSS/images, etc) should be referenced absolute from your views:
src="/assets/js/myapp.js"
Routed URLs do not map directly to file system based resources because templates should not be accessed by URL publically - they are only served by the controllers.
A common slim file structure looks like this:
app/
public/index.php
templates/
view.html
assets/
images/
js/
css/
Some add the assets subfolders directly into the public folder.
Others have those folders on the root level.
However, in general, public assets (e.g. CSS, JS, images) should be beneath the public document root (accessible to the public).
One thing that could be helpful if you do not like this behavior is to use Slim's basePath variable.
You should be able to set the base URL as a View variable in a slim.before callback in your index.php so that it is available to all routes like this:
$app->hook('slim.before', function () use ($app) {
$app->view()->appendData(array('baseUrl' => '/base/url/here'));
});
or
$app->hook('slim.before', function () use ($app) {
$posIndex = strpos( $_SERVER['PHP_SELF'], '/index.php');
$baseUrl = substr( $_SERVER['PHP_SELF'], 0, $posIndex);
$app->view()->appendData(array('baseUrl' => $baseUrl ));
});
And then apply it to the references in your HTML tag of the base template file and that's it.
<link rel="stylesheet" type="text/css" href="{{ base_url() }}/css/style.css" />
Or use Uri::getBaseUrl(), e.g.
$basePath = $request->getUri()->getBasePath();
I generated new bundle and I have styles.css file in following pathsrc/AdminBundle/Resource/public/styles.css. In my base.html.twig file I have link (templates/head.html.twig)
<link href="{{ asset('bundles/adminbundle/css/styles.css') }}" rel="stylesheet" type="text/css" />
But this giving error not found file. Please help.
Files from src/AdminBundle/Resource/public/styles.css are not copied automaticlly to web/bundles
You need to to run command
php app/console assets:install
I have project on Symfony 3 with installed assetic. I am using it for merging all css together and minify.
Usage in twig template:
{% stylesheets filter='cssrewrite' filter='uglifycss'
'assets/font-awesome-4.6.3/css/font-awesome.css'
...
%}
<link rel="stylesheet" href="{{ asset_url }}">
{% endstylesheets %}
Config:
filters:
cssrewrite: ~
uglifyjs2:
bin: "%kernel.root_dir%/Resources/node_modules/uglify-js/bin/uglifyjs"
uglifycss:
bin: "%kernel.root_dir%/Resources/node_modules/uglifycss/uglifycss"
In prod mode all works as expected. Assetic loads css files from path /assets/someDir/some.css and generated minified file (css or js) is in default assetic path /css/allCss.css or /js/allJs.css.
But in develop mode assetic generate new files from /assets/someDir/some.css to /css/some.css (each file and not minified) and load css files from there.
QUESTION:
How i can load original files from /assets/someDir/some.css in dev mode?
Because in this situation i must after each change in any css or js run php bin/console assetic:dump --env=dev and it is unacceptable.
Since you don't want to run php bin/console assetic:dump each time you change a CSS or a JS file, use php bin/console assetic:watch instead, it will automatically regenerate the files on every change of CSS or JS.
I tried to look for some info related to bundling, tried different scenario with the same result: doesn't work!
Here is the project structure:
..........
Content
css
style.css
fonts
images
.........
Scripts
Plugin1
src
css
style1.css
js
js1.js
Plugin2
src
css
style2.css
js
js2.js
Plugin3
src
css
style1.css
js
js2.js
somejs.js
someotherjs.js
case 1 - works
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/css/style.css"));
case 2 - doesn't work
bundles.Add(new StyleBundle("~/js/style").Include(
"~/Scripts/Plugin1/src/css/style1.css",
"~/Scripts/Plugin2/src/css/style2.css",
"~/Scripts/Plugin3/src/css/style3.css"));
My question is, how can I bundle my css from different folders in one single bundle? I know that if the styles are all in the same folder then will work.
Does this have to do anything with the path itself? Does the name of the bundle ... new StyleBundle("~/js/style").. must match the actual location of the css files (folder structure)?
When the page loads in the page source there is missing the bundle key for the one that doesn't work while for the other one is present:
<link href="/js/style?v=" rel="stylesheet"/>
<link href="/Content/css?v=z_NN8-Oubjqwg7jFATA50T7SzahDLay9Fi3Lti_eSJ81" rel="stylesheet"/>