Avec les nouveaux outils développeurs des navigateurs, il est désormais possible de faire du debug sur des fichiers JS et CSS compilés à partir de Coffee Script, LESS ou SCSS, en particulier sur Firefox et Chrome.
Les sources maps
Les sources maps sont des informations sur les fichiers générés, qui permettent de lier une instruction compilée avec l’endroit ou elle a été définie. Le format est bien complexe, mais les outils que nous utilisons nous permettent aisément de générés ces sources maps automatiquement, en rajoutant des options à la compilation.
Les sources maps et assetic
Le filtre assetic LESS peut prendre des options de compilation, qui sont distinguées en deux groupes : les options qui permettent de transformer le code source LESS en arbre (parser : représentation informatique du code source), puis de transformer cet arbre en fichier CSS (dumper). Ce qui nous intéresse ici, c’est de passer les bonnes options au moment du dump pour dire à LESS de dumper également les sources-maps.
Un coup d’oeil au fichier lessc nous permet de trouver les options à passer au dumper en fonction des options que prend lessc.
- $filter = new Filter\Less();
- $filter->addTreeOption('outputSourceFiles', true);
- $filter->addTreeOption('sourceMap'', true);
Avec ces options, le compilateur less va inclure les fichiers sources dans les fichiers compilés.
Intégration avec Symfony 2
Il suffit juste d’ajouter ces options au service « Filtre LESS » de symfony 2 de l’assetic-bundle.
Modification du Bundle :
- // \Acme\Demo\AcmeDemoBundle
- public function build(ContainerInterface $container)
- {
- parent::build($container);
- $container->addCompilerPass(new Compiler\LessSourceMapPass());
- }
Ajout d’une nouvelle passe de compilation :
- // \Acme\Demo\DependencyInjection\Compiler\LessSourceMapPass
- class LessSourceMapPass implements CompilerPassInterface
- {
- public function process(ContainerBuilder $container)
- {
- // Activation uniquement en mode debug
- if ($container->getParameter('kernel.debug')) {
- $lessAsseticFilter = $container->getDefinition('assetic.filter.less');
- // Ajout des options au dumper
- }
- }
- }