Pug-Minify

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

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.

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

$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:

$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.

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

Now let's see what your template should look like:

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:

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.

Important: to improve performance in production, enable the Pug cache by setting the cache option to a writable directory, examples:

$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.

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.

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

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

• .jsxp

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