Jump to main content Jump to doc navigation

What is MinifyX?

MinifyX is a snippet that allows you to combine JS and CSS files to reduce server load and optimize loading speed.

MinifyX is created and maintained by SCHERP Ontwikkeling.

Requirements

MinifyX requires MODX® Revolution 2.2.0 or later.

History

Version Release date Author Changes
1.0.0-PL1 March 26th, 2012 Patrick Nijkamp (SCHERP Ontwikkeling) Initial release.
1.1.0-PL September 09, 2012 Vasiliy Naumkin Improved minifiers and code refactor

Download & Installation

Install the package through the MODX® package manager.

What you need to know

MinifyX combines your files to 1 cache file and loads it from there. If you combine CSS files you should use absolute paths when using images or other URL related calls, the same goes for javascript. Some frameworks use bootloaders (like EXT) that need to be in their respective directories before they work. Be sure not to fall for this trap, could save you some time ;)

Using MinifyX in the front-end

Placing the snippet

Place the main [[[MinifyX](extras/minifyx "MinifyX")]] snippet call on your webpage. If you have placed the snippet it assigns the following placeholders to your page:

Placeholder name Content
[[+MinifyX.css]] The tag containing the source to the CSS cache file (should be placed in the head, most of the time before the javascript includes)
[[+MinifyX.javascript]] The tag containing the source to the javascript cache file (should be placed in the head)

Configuration parameters

You can configure the snippet "MinifyX" with the following parameters:

Parameter Description Values Default Value Required
jsSources Comma separated list to your JS files from the site base URL Comma separated string (empty) no
cssSources Comma separated list to your CSS files from the site base URL Comma separated string (empty) no
minifyCss Whether to minify the CSS or not 0 = no, 1 = yes 0 no
minifyJs Whether to minify the JS or not
(only block comments allowed! experimental) 0 = no, 1 = yes 0 no
cacheFolder The folder to the cache files from the site base URL A string assets/components/minifyx/cache/ no
jsFilename Base name of destination js file, without extension A string scripts
cssFilename Base name of destination css file, without extension A string styles

Examples

Below you see the main snippet call and the placement of the placeholders. Every parameter is optional, we have just used some possibilities of customization.

<html>
<head>
[[MinifyX?
  &jsSources=`
    /assets/myframework.js,
    /assets/lightbox.js,
    /assets/script.js
`
  &cssSources=`
    /assets/style1.css,
    /assets/style2.css
`
]]

[[+MinifyX.javascript]]
[[+MinifyX.css]]
</head>
<body></body>
</html>

External sources

Developers website: http://www.scherpontwikkeling.nl/portfolio/modx-addons/minifyx.html

GitHub repository: http://www.github.com/b03tz/MinifyX/ and https://github.com/bezumkin/MinifyX

Report bugs and request features: http://www.github.com/b03tz/MinifyX/issues

Support the team building MODX with a monthly donation.

The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.

Backers

  • modmore
  • STERC
  • Jens Wittmann – Gestaltung & Entwicklung
  • Fabian Christen
  • Digital Penguin
  • Dannevang Digital
  • Sepia River Studios
  • CrewMark
  • Chris Fickling
  • deJaya
  • Following Sea
  • Anton Tarasov
  • eydolan
  • Raffy
  • Lefthandmedia
  • Murray Wood
  • Snow Creative
  • Nick Clark
  • Helen
  • JT Skaggs
  • krisznet
  • YJ
  • Yanni
  • Richard

Budget

$366 per month—let's make that $500!

Learn more