PHPackages cloudgrayau/pitch - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. cloudgrayau/pitch ActiveCraft-plugin[Utility & Helpers](/categories/utility) cloudgrayau/pitch ================= On the go SCSS compiling, CSS/JS minifying, merging and caching. 3.1.4(1mo ago)19251MITPHPPHP ^8.0|^8.2 Since Oct 29Pushed 5mo ago1 watchersCompare [ Source](https://github.com/cloudgrayau/pitch)[ Packagist](https://packagist.org/packages/cloudgrayau/pitch)[ RSS](/packages/cloudgrayau-pitch/feed)WikiDiscussions craft5 Synced 1w ago READMEChangelog (10)Dependencies (8)Versions (33)Used By (0) Pitch for Craft CMS 4/5 ======================= [](#pitch-for-craft-cms-45) On the go SCSS compiling, CSS/JS minifying, merging and caching. [![Screenshot](resources/pitch.png)](resources/pitch.png) Requirements ------------ [](#requirements) This plugin requires Craft CMS 4.0.0 or later. Installation ------------ [](#installation) `composer require cloudgrayau/pitch` Pitch Overview -------------- [](#pitch-overview) Pitch is a plugin that allows for on the go SCSS compiling, CSS/JS minifying, merging and caching. Configuring Pitch ----------------- [](#configuring-pitch) SCSS compiling uses the latest version of [scssphp](https://scssphp.github.io/scssphp/) and two output styles are included: - `Expanded` - `Compressed` *(default)* CSS and JS minifying uses the 'MatthiasMullie\\Minify' package (which can be disabled via the settings). Caching is enabled by default (recommended) and the cache directory and duration can be customised. 3.0.0 Upgrade Notes ------------------- [](#300-upgrade-notes) Pitch files should now be loaded using the new preferred and cache-busting `pitch()` twig command. To upgrade, please replace `url('scss/asset.scss')` with `pitch('asset.scss')` for example, as per the instructions below. The old method of loading pitch files will still function. Pitch will now scan the template files and try to automatically regenerate the cache after the cache has been cleared (this is disabled in development mode). For Craft 5, Pitch now uses the version 2 branch of the `scssphp` compiler. This release is a full rewrite of the compiler and requires >= PHP8.1. Advanced Caching Mode --------------------- [](#advanced-caching-mode) **Advanced Caching Mode** can also be enabled, which offers superior performance but requires server rewrites and changes to the default storage path. For instructions on how to setup Advanced Caching Mode, please refer to the [ADVANCED.md](https://github.com/cloudgrayau/pitch/blob/craft5/ADVANCED.md). Using Pitch ----------- [](#using-pitch) - **SCSS** - `{% do view.registerCssFile(pitch('.scss')) %}` - **CSS** - `{% do view.registerCssFile(pitch('.css')) %}` - **JS** - `{% do view.registerJsFile(pitch('.js')) %}` For [example files](https://github.com/cloudgrayau/pitch/tree/craft5/examples), please browse to the `/vendor/cloudgrayau/pitch/examples/` directory for installation. You can now compile inline SCSS and minify CSS/JS directly via your templates in Twig. - **SCSS** - `{{ craft.pitch.renderSCSS(entry.field)|raw }}` - **CSS** - `{{ craft.pitch.renderCSS(entry.field)|raw }}` - **JS** - `{{ craft.pitch.renderJS(entry.field)|raw }}` Further instructions for the inline method are found below. Merging & Loading Files --------------------------- [](#merging--loading-files) ### SCSS [](#scss) `{% do view.registerCssFile(pitch('style.scss')) %}` will load and compile the following SCSS file: - `/CRAFT/web/style.scss` `{% do view.registerCssFile(pitch('assets/style,chosen,plugin/owl.scss')) %}` will merge and compile the following SCSS files: - `/CRAFT/web/assets/style.scss` - `/CRAFT/web/assets/chosen.scss` - `/CRAFT/web/assets/plugin/owl.scss` All files being merged will need to have the `.scss` extension. In SCSS, `#{$baseUrl}` refers to the relative `@web` directory (no trailing slash). Please note, the old method of loading SCSS files via `{% do view.registerCssFile(url('scss/style.scss')) %}` will still work. --- ### CSS [](#css) `{% do view.registerCssFile(pitch('style.css')) %}` will load and minify the following CSS file: - `/CRAFT/web/style.css` `{% do view.registerCssFile(pitch('assets/style,chosen,plugin/owl.css')) %}` will merge and minify the following CSS files: - `/CRAFT/web/assets/style.css` - `/CRAFT/web/assets/chosen.css` - `/CRAFT/web/assets/plugin/owl.css` All files being merged will need to have the `.css` extension. In CSS, `#{$baseUrl}` refers to the relative `@web` directory (no trailing slash). Please note, the old method of loading CSS files via `{% do view.registerCssFile(url('css/style.css')) %}` will still work. --- ### JS [](#js) `{% do view.registerJsFile(pitch('script.js')) %}` will load and minify the following JS file: - `/CRAFT/web/script.js` `{% do view.registerJsFile(pitch('assets/script,chosen,plugin/owl.js')) %}` will merge and minify the following JS files: - `/CRAFT/web/assets/script.js` - `/CRAFT/web/assets/chosen.js` - `/CRAFT/web/assets/plugin/owl.js` All files being merged will need to have the `.js` extension. In JS, `$baseUrl` refers to the relative `@web` directory (no trailing slash). Please note, the old method of loading JS files via `{% do view.registerCssFile(url('js/script.js')) %}` will still work. --- Cache Busting ------------- [](#cache-busting) The new twig `pitch()` command will automatically embed the last-modified date of the file/s into the compiled filename. Pitch will also scan the template files and try to automatically regenerate the cache after the cache has been cleared (this is disabled in development mode). If using the old load method, you can also force the browser to re-cache asset files by using `:DIGIT` in the asset URL prior to the extension, for example `'js/assets/site,plugin/chosen:01.js'`. Whilst in development mode, the browser cache of all assets will be forced to refresh on each page load. Subresource Integrity (SRI) --------------------------- [](#subresource-integrity-sri) You can generate a SRI for pitch files, using the new twig `pitch_sri(, )` command. By default, it will use sha384 and it should only be used in tandom with the `pitch()` command. For example: `{% do view.registerJsFile(pitch('script.js'), {type:'module',integrity:pitch_sri('script.js', 'sha512')}) %}` Please note, the SRI will only be generated after the cache file has been generated. Inline Compiling & Minifying -------------------------------- [](#inline-compiling--minifying) You can now compile inline SCSS and minify CSS/JS directly via your templates in Twig, as follows: - **SCSS** - `{{ craft.pitch.renderSCSS(entry.field)|raw }}` - **CSS** - `{{ craft.pitch.renderCSS(entry.field)|raw }}` - **JS** - `{{ craft.pitch.renderJS(entry.field)|raw }}` Please note, the `@import` command in SCSS, will be relative to the `@web` directory. I would highly recommend that the inline method is inclosed in `{% cache %}{% endcache %}` tags for performance reasons. The Inline Compiling & Minifying integrates great with the [Code Field](https://github.com/nystudio107/craft-code-field) from @nystudio107. Clearing Cache -------------- [](#clearing-cache) The Pitch cache can be cleared via the following methods: 1. Via the CraftCMS Dashboard Widget 2. Via the CraftCMS Settings => Pitch 3. Via the CraftCMS Utilities => Caches 4. Via the console `./craft pitch/clear` Brought to you by [Cloud Gray Pty Ltd](https://cloudgray.com.au/) ### Health Score 49 — FairBetter than 95% of packages Maintenance79 Regular maintenance activity Popularity17 Limited adoption so far Community8 Small or concentrated contributor base Maturity77 Established project with proven stability Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~71 days Recently: every ~60 days Total 29 Last Release 42d ago Major Versions 1.2.1 → 2.0.02022-03-25 2.4.0 → 3.0.02025-06-16 PHP version history (3 changes)2.0.0PHP ^8.0 2.4.0PHP ^8.0|^8.2 3.0.0PHP ^8.2 ### Community Maintainers ![](https://www.gravatar.com/avatar/ac0122f7a7aab3787d35057daeb1ca626f9d27611e17af984b41fb0e288bd117?d=identicon)[cloudgrayau](/maintainers/cloudgrayau) --- Top Contributors [![cloudgrayau](https://avatars.githubusercontent.com/u/43738347?v=4)](https://github.com/cloudgrayau "cloudgrayau (91 commits)") --- Tags cmsCraftcraftcmscraft-pluginpitch ### Embed Badge ![Health badge](/badges/cloudgrayau-pitch/health.svg) ``` [![Health](https://phpackages.com/badges/cloudgrayau-pitch/health.svg)](https://phpackages.com/packages/cloudgrayau-pitch) ``` ### Alternatives [verbb/navigation Create navigation menus for your site. 90683.7k17](/packages/verbb-navigation)[verbb/formie The most user-friendly forms plugin for Craft. 101372.9k40](/packages/verbb-formie)[verbb/comments Add comments to your site. 13753.1k](/packages/verbb-comments)[verbb/tablemaker Create customizable and user-defined table fields. 40168.8k1](/packages/verbb-tablemaker)[supercool/tablemaker Create customizable and user-defined table fields. 40141.7k](/packages/supercool-tablemaker)[verbb/vizy A flexible visual editor field for Craft. 4348.6k](/packages/verbb-vizy) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)