pug-php/pug-minify

One keyword to minify them all (the assets: JS, CSS, Stylus, minify, Coffee, React) in your pug-php template.

Pug-Minify

, _(*1)

One keyword to minify them all (the assets: JS, CSS, Stylus, Less, Coffee, React) in your pug-php template., _(*2)

Install

composer require pug-php/pug-minify

Usage

<?php

use Pug\Keyword\Minify;
use Pug\Pug;

// Create a new Pug instance:
$pug = new Pug(array(
    'assetDirectory'  => 'path/to/the/asset/sources',
    'outputDirectory' => 'web',
));
// Or if you already instanciate it, just set the options:
$pug->setOptions(array(
    'assetDirectory'  => 'path/to/the/asset/sources',
    'outputDirectory' => 'web',
));
$minify = new Minify($pug);
$pug->addKeyword('minify', $minify);
$pug->addKeyword('concat', $minify);

$pug->render('my/template.pug');

You can link the Minify instance to any keyword. Just remind that if you use concat or concat-to, the files will only be concatened and not minified, for any other keyword, they will be both concatened and minified., _(*3)

By default concat and minification are not enable to allow you to debug it easier, in production you should set the environment option:, _(*4)

$pug->setOption('environment', 'production');

If you still use pug-php 2, production is the default, you must set it this way in your development environment:, _(*5)

$pug->setCustomOption('environment', 'development');

Note that in pug-php 2, you must use ->setCustomOption and ->setCustomOptions for assetDirectory, outputDirectory and environment options. With pug-php 3, you can now use ->setOption and ->setOptions for any option., _(*6)

This will just transform (for stylus, less, coffee, etc.) and copy your assets to the output directory., _(*7)

Now let's see what your template should look like:, _(*8)

doctype 5
html
  head
    title Foo
    minify top
      script(src="foo/test.js")
      script(src="coffee/test.coffee")
      script(src="react-pug/test.jsxp" type="text/babel")
      link(rel="stylesheet" href="foo/test.css")
      link(rel="stylesheet" href="less/test.less")
      link(rel="stylesheet" href="stylus/test.styl")
      meta(name="foo" content="bar")
  body
    h1 Foobar
    minify bottom
      script(src="react/test.jsx" type="text/babel")
      script(src="coffee-pug/test.cofp")
      //- some comment

In production, all script and link (with a stylesheet rel) tags of each minify block will be merged into one tag pointing to a minified version of all of them like this:, _(*9)

doctype 5
html
  head
    title Foo
    script(src="js/top.min.js")
    link(rel="stylesheet" href="css/top.min.css")
    meta(name="foo" content="bar")
  body
    h1 Foobar
    script(src="js/bottom.js")
    //- some comment

The generated files js/top.min.js, css/top.min.css and js/bottom.js are stored in the outputDirectory you specifed with the option. So you just must ensure src="foo/bar.js" will target {outputDirectory}/foo/bar.js., _(*10)

Important: to improve performance in production, enable the Pug cache by setting the cache option to a writable directory, examples:, _(*11)

$pug->setOption('cache', 'var/cache/pug');
$pug->setOption('cache', sys_get_temp_dir());

And clear this cache directory when your assets change or when you deploy new ones., _(*12)

As the Pug cache feature allow to render the pug code only once, and so the assets, we do not incorporate a specific caching option in the Minify keyword., _(*13)

Supported assets

• .coffee files are compiled into JS from CoffeeScript
• .cofp handle CoffeeScript with pug inside tagged with html = ::"""h1#title Hello"""
• .jsx files are compiled into JS from JSX also used in React
• .jsxp handle JSX with pug inside tagged with html = ::`h1#title Hello`;
• .styl files are compiled into CSS from Stylus
• .less files are compiled into CSS from Less

Embedded pug code can be multiline: * .cofp, _(*14)

html = ::"""
      section
        article
          div:p.text Bla bla
    """

• .jsxp

let html = ::`
      section
        article
          div:p.text Bla bla
    `;