縮小化/ Uglify埋め込まれたJavaScriptのSymfony /小枝応答

Question

に圧縮するには、JavaScriptとCSSファイルをリンクし、私のSymfony 2.8プロジェクトでAsseticを使用するときに大したことないです。しかし、scriptタグを使ってページに直接埋め込まれているスクリプトはどうでしょうか？これらのスクリプトは変更されません。

これらのスクリプトも同様に圧縮/変更/ uglifyできますか？

もちろん、私はこれらのスクリプトを別々のファイルに移動するだけで、Asseticフィルタを適用することもできます。しかし場合によっては、HTML/Twigテンプレート内に直接スクリプトを置くほうが便利です。

したがって、これらのスクリプトを移動せずにフィルタリングする既存のソリューションはありますか？

Answer 1

私はこのための解決策は、私は最終的に自分自身を作成するために管理が見つかりませんでしたので：埋め込まれたスクリプトにAssetics uglifyJS2フィルタを適用するために私の（既存の）小枝の拡張子にカスタムタグを追加：

ステップ1：をAsseticにコンテンツを渡すためにNodeで使用されUglifierクラスを、追加：小枝TokenParserとNode

class UglifyTokenParser extends Twig_TokenParser { 
    private $enabled;  

    public function __construct($enabled = true) { 
     $this->enabled = (bool) $enabled; 
    } 


    public function parse(Twig_Token $token) { 
     $lineNumber = $token->getLine(); 

     $this->parser->getStream()->expect(Twig_Token::BLOCK_END_TYPE); 
     $body = $this->parser->subparse(function (Twig_Token $token) { 
      return $token->test('enduglify'); 
     }, true); 

     $this->parser->getStream()->expect(Twig_Token::BLOCK_END_TYPE); 
     if ($this->enabled) { 
      $node = new UglifyNode($body, $lineNumber, $this->getTag()); 
      return $node; 
     } 

     return $body; 
    }  


    public function getTag() { 
     return 'uglify'; 
    } 
} 

class UglifyNode extends \Twig_Node { 
    public function __construct(Twig_Node $body, $lineNumber, $tag = 'uglify') { 
     parent::__construct(array('body' => $body), array(), $lineNumber, $tag); 
    } 

    public function compile(Twig_Compiler $compiler) {  
     $compiler 
      ->addDebugInfo($this) 
      ->write("ob_start();\n")     
      ->subcompile($this->getNode('body')) 
      ->write("echo \$context['_uglifier']->uglify(trim(ob_get_clean()));\n"); 
    } 
} 

ステップ2を作成します。 UglifyJS2Filter

class Uglifier { 
    private $filter; 
    private $asset; 
    private $enabled; 

    public function __construct(FilterInterface $filter, $endabled) { 
     $this->filter = $filter; 
     $this->asset = new UglifierAsset(array($this->filter)); 
     $this->enabled = $endabled; 
    } 

    public function uglify($content) { 
     if ($this->enabled) { 
      $this->asset->loadContent($content); 
      $uglified = $this->asset->dump();  
      return $uglified; 
     } else { 
      return $content; 
     } 
    } 
} 


class UglifierAsset extends BaseAsset { 
    public function __construct($filters = array()) { 
     parent::__construct($filters); 
    } 

    private $theContent; 
    public function loadContent($content) { 
     $this->theContent = $content; 
     $this->load(); 
    } 

    public function load(FilterInterface $additionalFilter = null) { 
     $this->doLoad($this->theContent); 
    } 

    public function getLastModified() { 
     return 0; 
    } 
} 

ステップ3：、sServiceとしてUglifierを作成Twig Extensionに渡し、拡張子の中にカスタムタグを実装

app.twig_extension: 
    class: AppBundle\Twig\AppExtension 
    public: false 
    arguments: [ "@app.twig_extension.uglifier" ] 
    tags: 
     - { name: twig.extension } 


app.twig_extension.uglifier: 
    class: AppBundle\Twig\uglify\Uglifier 
    arguments: [ "@assetic.filter.uglifyjs2", "%twig_extension.unglifier.enabled%" ] 


class AppExtension extends \Twig_Extension implements \Twig_Extension_GlobalsInterface { 
    private $uglifier; 
    public function __construct(Uglifier $uglifier) { 
     $this->uglifier = $uglifier; 
    } 

    public function getGlobals() {  
     return array(
      '_uglifier' => $this->uglifier, 
     ); 
    } 

    public function getTokenParsers() { 
     return array(new UglifyTokenParser()); 
    } 
} 

ステップ4：{ `新しいとラップ埋め込まれたスクリプト％uglify％}タグ

{# before #} 
<script type="text/javascript"> 
    // some JS 
</script> 

{# after #} 
<script type="text/javascript"> 
    {% uglify %} 
     // some JS 
    {% enduglify %} 
</script> 

DONE