pug-php / pug-minify
One keyword to minify them all (the assets: JS, CSS, Stylus, minify, Coffee, React) in your pug-php template.
Fund package maintenance!
kylekatarnls
Open Collective
Tidelift
Installs: 82 328
Dependents: 1
Suggesters: 0
Security: 0
Stars: 5
Watchers: 2
Forks: 0
Open Issues: 0
Requires
- php: >=5.3
- nodejs-php-fallback/coffeescript: ^1.0
- nodejs-php-fallback/less: ^1.0
- nodejs-php-fallback/react: ^1.0
- nodejs-php-fallback/stylus: ^1.0
- nodejs-php-fallback/uglify: ^1.0.2
- pug-php/pug: ^2.0 || ^3.0
Requires (Dev)
- composer/composer: ^1.10.23 || ^2.1.9
- phpunit/phpunit: ^4.8.36 || ^5.7.27 || ^8.5.31
README
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 withhtml = ::"""h1#title Hello"""
.jsx
files are compiled into JS from JSX also used in React.jsxp
handle JSX with pug inside tagged withhtml = ::`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 `;