README

现场SCSS编译，CSS/JS压缩、合并和缓存。

需求

此插件需要Craft CMS 4.0.0或更高版本。

安装

composer require cloudgrayau/pitch

Pitch概述

Pitch是一个插件，允许现场进行SCSS编译、CSS/JS压缩、合并和缓存。

配置Pitch

SCSS编译使用最新版本的scssphp，并包括两种输出样式

展开
压缩 (默认)

CSS和JS压缩使用'MatthiasMullie\Minify'包（可以通过设置禁用）。

缓存默认启用（推荐），可以自定义缓存目录和持续时间。

高级缓存模式

高级缓存模式也可以启用，这提供了更好的性能，但需要服务器重写和更改默认存储路径。有关如何设置高级缓存模式的说明，请参阅ADVANCED.md。

使用Pitch

SCSS - {% do view.registerCssFile(url('scss/FILENAME.scss')) %}
CSS - {% do view.registerCssFile(url('css/FILENAME.css')) %}
JS - {% do view.registerJsFile(url('js/FILENAME.js')) %}

有关示例文件，请浏览到/vendor/cloudgrayau/pitch/examples/目录进行安装。

现在您可以通过模板中的Twig直接编译内联SCSS和压缩CSS/JS。

SCSS - <style>{{ craft.pitch.renderSCSS(entry.field)|raw }}</style>
CSS - <style>{{ craft.pitch.renderCSS(entry.field)|raw }}</style>
JS - <script type="text/javascript">{{ craft.pitch.renderJS(entry.field)|raw }}</script>

有关内联方法的进一步说明，请参阅下面的说明。

合并和加载文件

SCSS

{% do view.registerCssFile(url('scss/style.scss')) %}将加载和编译以下SCSS文件

/CRAFT/web/style.scss

{% do view.registerCssFile(url('scss/assets/style,chosen,plugin/owl.scss')) %}将合并和编译以下SCSS文件

/CRAFT/web/assets/style.scss
/CRAFT/web/assets/chosen.scss
/CRAFT/web/assets/plugin/owl.scss

所有要合并的文件都需要有.scss扩展名。

在SCSS中，$baseUrl指的是相对的@web目录（不带尾部斜杠）。

CSS

{% do view.registerCssFile(url('css/style.css')) %}将加载和压缩以下CSS文件

/CRAFT/web/style.css

{% do view.registerCssFile(url('css/assets/style,chosen,plugin/owl.css')) %}将合并和压缩以下CSS文件

/CRAFT/web/assets/style.css
/CRAFT/web/assets/chosen.css
/CRAFT/web/assets/plugin/owl.css

所有要合并的文件都需要有.css扩展名。

JS

{% do view.registerJsFile(url('js/script.js')) %}将加载和压缩以下JS文件

/CRAFT/web/script.js

{% do view.registerJsFile(url('js/assets/script,chosen,plugin/owl.js')) %}将合并和压缩以下JS文件

/CRAFT/web/assets/script.js
/CRAFT/web/assets/chosen.js
/CRAFT/web/assets/plugin/owl.js

所有要合并的文件都需要有.js扩展名。

在JS中，$baseUrl指的是相对的@web目录（不带尾部斜杠）。

您还可以通过在资产URL的扩展名之前使用:数字来强制浏览器重新缓存资产文件，例如'js/assets/site,plugin/chosen:01.js'。

在开发模式下，所有资产的浏览器缓存将在每次页面加载时强制刷新。

内联编译 & 压缩

现在您可以直接通过Twig模板编译内联SCSS并压缩CSS/JS，如下所示

SCSS - <style>{{ craft.pitch.renderSCSS(entry.field)|raw }}</style>
CSS - <style>{{ craft.pitch.renderCSS(entry.field)|raw }}</style>
JS - <script type="text/javascript">{{ craft.pitch.renderJS(entry.field)|raw }}</script>

请注意，SCSS中的@import命令将相对于@web目录。

出于性能考虑，我强烈建议将内联方法包裹在{% cache %}{% endcache %}标签中。

内联编译 & 压缩与@nystudio107的Code Field集成得很好。

清除缓存

可以通过以下方法清除Pitch缓存

通过CraftCMS设置 => Pitch
通过CraftCMS工具 => 缓存
通过控制台./craft pitch/clear

由Cloud Gray Pty Ltd提供

cloudgrayau / pitch

维护者

详细信息