electrotiti/tlassets-bundle

Symfony assets management with Gulp

dev-master 2014-10-07 21:46 UTC

Requires

• php: >=5.3.3
• phpunit/phpunit: 3.7.*
• symfony/symfony: 2.5.*
• twig/extensions: ~1.0

MIT

• Thierry LESZKOWICZ

• symfony
• twig
• assets
• assetic
• gulp

README

TlAssetsBundle is an alternative to Assetic, it build your assets using NodeJS, GULP and custom Twig tags on a Symfony2 project.

WARNING: This bundle is under development, do not use on production.

How it works ?

1:/ In your Twig template, use the tags "style" and "js" to give assets source path and optional filters

2:/ The parser, find all Twig template with these tags and create a JSON buffer file in cache that describe the location of source path, the destination filename and some others options

3:/ The compiler read the buffer files previously created and compile the final assets with GULP

The goal of these two steps (and not one step like assetic does), is to parse your Twig template only when your assets definition change, and compile your assets only when you modify the content of your assets file.

Prerequisites

First you have to install in your environment this tools:

• Node JS
• NPM

Installation

Gulp and dependencies

In order to install Gulp and his dependencies, execute command this command :

php app/console tlassets:gulp:install

Tags Twig

Below an example of tags that you can use in your Twig

{% style "@MyCustomBundle/Resources/public/less/" filter="less" %}
  <link rel="stylesheet" href="{{ asset(asset_url) }}" type="text/css" />
{% endstyle %}

{% js "@MyCustomBundle/Resources/public/js/" %}
  <script type="application/javascript" src="{{ asset(asset_url) }}" />
{% endjs %}

Install your assets:

php app/console assets:install

This command (from Symfony), copy your assets from the folder : "src/" to the folder : "web/bundles/"

Quick assets compilation

To compile quickly your assets you just have to do this:

php app/console assets:dump

This command do a tlassets:flush, a tlassets:parse and a tlassets:compile"

Generate your assets step by step

Alternatively (and it's why this bundle is different of Assetic), each task on assets construction can be do separately

Flush previous compilation

php app/console tlassets:flush

This command remove cache and assets previously generated in order to have a clean environment

Parse Twig template

php app/console tlassets:parse

This command parse your Twig template and create a JSON file on the cache directory that will be used by GULP

Compile assets

php app/console tlassets:compile

This command retrieves all file buffer previously created with the parsing command and compile the final assets files