Assetic Symfony2 less+compress filter - symfony

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

In Symfony2 using the AsseticBundle tool, based on the .Less file to create all the .Css files to web directory, the program into an infinite loop?

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]

Symfony 2: Deploy assets from non bundles

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 %}

Custom content type in Symfony2 Assetic (phpless)

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

Assetic bad css files link in prod env

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.

When dumping assetic, using MopaBootstrapBundle, Runtime Exception occurs: The filename, directory name, or volume label syntax is incorrect

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. =)

Resources