Is there a way to make assetic automatically compile and compress .less files?
I tried this config:
assetic:
debug: "%kernel.debug%"
use_controller: true
bundles: ['BloggerBlogBundle', "FOSCommentBundle"]
#java: /usr/bin/java
filters:
cssrewrite: ~
less:
node: /home/igor/nvm/v0.8.16/bin/node
node_paths: [/home/igor/nvm/bin/node_modules]
apply_to: "\.less$"
yui_css:
jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar
apply_to: "\.css$|\.less"
But this results in .css files getting compressed and .less files getting compiled. I can't make it do both: compile and then compress my .less files.
Here is my config and twig code for compiling + compressing .less files in the same time:
config.yml
# Assetic Configuration
assetic:
debug: %kernel.debug%
use_controller: false
java: %java_path%
filters:
less:
node: %node_base_path%
node_paths: [%node_lib_path%, %node_modules_path%]
cssrewrite: ~
yui_css:
jar: %kernel.root_dir%%jar_file%
yui_js:
jar: %kernel.root_dir%%jar_file%
In my twig:
{% block stylesheets %}
{% stylesheets
'#MyBundle/Resources/public/css/event.less'
'css/colorpicker.css'
filter='less,?yui_css'
output='build/event_layout_2cols.css'
%}
<link href="{{ asset_url }}" rel="stylesheet" media="screen" />
{% endstylesheets %}
{% endblock %}
And here is the command to both compile AND compress:
./app/console assetic:dump --env=prod --no-debug
Hope that help!
Related
I can't find the reason. Please help me.
I use this command generate .css file to web directory:
$sudo php app/console assetic:dump
Error information:
[Symfony\Component\Debug\Exception\OutOfMemoryException]
Error: Allowed memory size of 5368709120 bytes exhausted (tried to allocate 4205621120 bytes)
$ls /opt/webroot/symfony/web/css
//views/base.html.twig
{% block head_style %}
{% stylesheets filter='less,cssrewrite'
'#ScourgenPersonFinderBundle/Resources/public/less/style.less'
'#BloggerBlogBundle/Resources/css/style.css'
%}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="screen"/>
{% endstylesheets %}
{% endblock head_style %}
#app/config/config.yml
assetic:
debug: '%kernel.debug%'
# use_controller: '%kernel.debug%'
use_controller: false
bundles:
- ScourgenPersonFinderBundle
- MopaBootstrapBundle
- BloggerBlogBundle
filters:
cssrewrite: ~
# yui_css:
# jar: /usr/local/lib/node_modules/yuicompressor/build/yuicompressor-2.4.8.jarw
less:
node: /usr/local/bin/node
node_paths: [/usr/local/lib/node_modules, /opt/lessc]
I wonder if there's a possibility to deploy assets from a custom folder.
I've separated my business logic and entities from the bundles and now I would like to have a centralized place to my custom js library.
Is there any configuration available for symfony or assetic to deploy a custom folder that doesn't belong to a bundle? TIA
Well, I found an answer without intention LOL.
Looking a repo on github I saw that Assetic can be configured to receive some input resources and generate a unique output like this:
assetic:
debug: %kernel.debug%
use_controller: true
filters:
cssrewrite: ~
yui_css:
jar: %kernel.root_dir%/../vendor/nervo/yuicompressor/yuicompressor.jar
yui_js:
jar: %kernel.root_dir%/../vendor/nervo/yuicompressor/yuicompressor.jar
less:
node: /usr/bin/node
node_paths: [/usr/local/bin/]
apply_to: "\.less$"
assets:
scripts:
inputs:
- %kernel.root_dir%/../src/MyResources/script.js
- #FoundationViewBundle/Resources/public/js/*
filters:
- cssrewrite
- yui_js
output: js/scripts.min.js
debug: %kernel.debug%
stylesheets:
inputs:
- %kernel.root_dir%/../src/MyResources/stylesheet.css
- #FoundationViewBundle/Resources/public/css/*
filters:
- less
- yui_css
output: css/style.min.css
debug: %kernel.debug%
Which can be used directly with:
<link href="{{ asset('css/style.min.css') }}" rel="stylesheet">
<script src="{{ asset('js/scripts.min.js') }}"></script>
or using Assetic aliases:
{% stylesheets '#stylesheets' %}
<link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}">
{% endstylesheets %}
{% javascripts '#scripts' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
I'm using Phpless(0.3.0) to compile less css in Symfony(2.4.2) automatically
My files:
config_dev.yml
assetic:
debug: "%kernel.debug%"
use_controller: true
filters:
cssrewrite: ~
lessphp:
apply_to: "\.less$"
formatter: "compressed"
preserve_comments: false
view.twig:
{% stylesheets 'application/assets/less/bootstrap.less' %}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}">
{% endstylesheets %}
So, in the response, everything is compiled.. but the content type of the generated css (that comes from symfony controller (use_controller: true)) is "text/html"
4798dcc_bootstrap_1.css GET 304 text/html login:20 0 B 320 ms
There are any setting of workaround to return this content type as text/css?
Taking into account that is the development environment, and I want avoid to generate manually the css with:
php app/console assetic:dump
Thanks!
The problem might be with fos_rest catching all requests
fos_rest:
format_listener:
rules:
- { path: ^/, priorities: [html], fallback_format: html, prefer_extension: false }
Add rule before that to exclude your assets
I'm trying to test my application in a production environment context. The problem is that Assetic is not working properly.
the css files and js files are not loaded.
Here's what I did:
I was setted : $kernel = new AppKernel('prod', true);
I excecuted the commands:
php app/console cache:clear --env=prod --no-debug
php app/console assetic:dump --env=prod --no-debug
so far, no problems, my files have been created:
01:07:26 [file+] /var/www/visual-immersion/app/../web/js/b0c2086.js
01:07:26 [file+] /var/www/visual-immersion/app/../web/js/a49caf1.js
01:07:26 [file+] /var/www/visual-immersion/app/../web/css/a580ac9.css
But when i launch my web page, no css, no js. if i inspect my source code page, i can see:
<link rel="stylesheet" type="text/css"href="/css/a580ac9_part_1_home_1.css">
<link rel="stylesheet" type="text/css" href="/css/a580ac9_layout_2.css">
<link rel="stylesheet" type="text/css" href="/css/a580ac9_style_3.css">
<link rel="stylesheet" type="text/css" href="/css/a580ac9_font_4.css">
<link rel="stylesheet" type="text/css" href="/css/a580ac9_responsive_5.css">
<link rel="stylesheet" type="text/css" href="/css/a580ac9_animations_6.css">
<link rel="stylesheet" type="text/css" href="/css/a580ac9_personalized-responsive_7.css">
as if i was in dev env !
So i cleaned my cache in dev env too, and restarted my process to prod env...No success.
Do you know what is problem ?
i add my config.yml :
imports:
- { resource: parameters.yml }
- { resource: security.yml }
framework:
#esi: ~
#translator: { fallback: %locale% }
secret: %secret%
router:
resource: "%kernel.root_dir%/config/routing.yml"
strict_requirements: ~
form: ~
csrf_protection: ~
validation: { enable_annotations: true }
templating:
engines: ['twig']
#assets_version: SomeVersionScheme
default_locale: "%locale%"
trusted_proxies: ~
session: ~
fragments: ~
# Twig Configuration
twig:
debug: %kernel.debug%
strict_variables: %kernel.debug%
# Assetic Configuration
assetic:
debug: %kernel.debug%
use_controller: false
bundles: [VisualImmersionAdminBundle, VisualImmersionSiteBundle]
#java: /usr/bin/java
filters:
cssrewrite: ~
#closure:
# jar: %kernel.root_dir%/Resources/java/compiler.jar
#yui_css:
# jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar
# Doctrine Configuration
doctrine:
dbal:
driver: %database_driver%
host: %database_host%
port: %database_port%
dbname: %database_name%
user: %database_user%
password: %database_password%
charset: UTF8
# if using pdo_sqlite as your database driver, add the path in parameters.yml
# e.g. database_path: %kernel.root_dir%/data/data.db3
# path: %database_path%
orm:
auto_generate_proxy_classes: %kernel.debug%
auto_mapping: true
# Swiftmailer Configuration
swiftmailer:
transport: gmail
username: contact#visual-immersion.com
password: mypassword
Edit:
I retried the procedure with assets: install without success.
Edit 2:
in my web browser dev tool, if i add the line:
<link rel="stylesheet" type="text/css" href="/css/a580ac9.css">
It is work. I really think Assetic load files as dev env instead of prod env.
Any idea?
EDIT 3:
I add the layout or managed css files, if it can help ...
{% stylesheets '#VisualImmersionSiteBundle/Resources/public/css/*' filter='cssrewrite'
'css/stylesheets/layout.css'
'css/stylesheets/style.css'
'css/stylesheets/font.css'
'css/stylesheets/responsive.css'
'css/stylesheets/animations.css'
'css/stylesheets/personalized-responsive.css'
%}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}">
{% endstylesheets %}
EDIT 4:
i tried to change my stylesheets filter like this:
{% stylesheets filter='cssrewrite'
'css/stylesheets/*'
'bundles/visualimmersionsite/css/*'
%}
but no success.
Try to use:
php app/console assets:install web --symlink
This way, instead of having a copy of each bundle's resources, you'll have a symlink, so there should be no need to update.
From docs:
When using the cssrewrite filter, don't refer to your CSS files using
the #AcmeFooBundle syntax.
Try this way:
{% stylesheets 'bundles/acme_foo/css/*' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
Setting prod to false is not what's happening.
You're setting the environment to prod and debug to false:
class Kernel ...
public function __construct($environment, $debug)
I stumbled on it by accident:
Assetic not creating combined links
And it actually works. I do not understand anything. For the prod work, you must set 'prod' to false.
Below is the complete output:
> php.exe C:\xampp\htdocs\bootstrap\app\console assetic:dump
Dumping all dev assets.
Debug mode is on.
[file+] C:\xampp\htdocs\bootstrap\app/../web/css/992f634.css
'stty' is not recognized as an internal or external command,
operable program or batch file.
[RuntimeException]
The filename, directory name, or volume label syntax is incorrect.
assetic:dump [--watch] [--force] [--period="..."] [write_to]
Process finished with exit code 1 at 23:12:02.
Execution time: 1,118 ms.
Am installing MopaBootstrapBundle. I am able to access the site without styling. What could have gone wrong? below is my config.yml
# Assetic Configuration
assetic:
debug: %kernel.debug%
use_controller: false
# java: /usr/bin/java
filters:
cssrewrite: ~
less:
node: C:\nodejs
node_paths: [C:\nodejs\node_modules]
cssembed:
jar: %kernel.root_dir%/Resources/java/cssembed-0.4.5.jar
yui_css:
jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar
yui_js:
jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar
# closure:
# jar: %kernel.root_dir%/java/compiler.jar
Please help me, I don't know what else to do. =(
I wasn't able to get less to work with my Symfony2 installation, so instead I used lessphp. here is how to configure lessphp with MopaBootstrapBundle and effectively eliminate my problem. BTW this solution is also like how to run MopaBootstrapBundle using a Windows Machine.
//add this to your deps file, then install
[lessphp]
git = "https://github.com/leafo/lessphp.git"
target = "/lessphp"
//add this to your autoload.php
$loader->registerPrefixes(array(
//some codes here
'lessc' => __DIR__.'/../vendor/lessphp',
));
//add this to config.yml
assetic:
filters:
less: ~
lessphp:
apply_to: "\.less$"
file: %kernel.root_dir%/../vendor/lessphp/lessc.inc.php
//override the layout.html.twig, either only to your bundle or from the app/Resources
{% extends 'MopaBootstrapBundle::layout.html.twig' %}
{% block head_style %}
{% stylesheets
'#MopaBootstrapBundle/Resources/public/less/mopabootstrapbundle.less'
%}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="screen" />
{% endstylesheets %}
{% endblock head_style %}
Hope this helps. =)