bor-attila/cakephp-rollup

该包已被弃用且不再维护。作者建议使用brandcom/cakephp-vite包代替。

CakePHP的Rollup插件，用于更好的CSS/JS处理

维护者

详细信息

github.com/bor-attila/cakephp-rollup

源代码

问题

安装: 981

依赖: 0

建议者: 0

安全: 0

星标: 0

关注者: 2

分叉: 0

开放问题: 0

类型:cakephp-plugin

1.0.0-beta 2020-12-31 15:39 UTC

Requires

MIT 48250a71bb9a6b1f87de50b991807b42b5b8abdb

cssJSsassscsscakephp-pluginbabelrollupjs

This package is auto-updated.

Last update: 2022-12-23 11:56:27 UTC

README

此插件并非真正关于代码，它只是提供了一个如何处理CSS/JS的结构，以及一些辅助方法。

SEO不是问题？你想有一个完全客户端渲染的前端？那么你可能应该检查inertiajs。SEO或SSR不是问题？你想使用CakePHP作为后端并在JS中构建整个前端？那么你应该检查vuejs。你只需要一个'assetcompressor'？那么你应该检查markstory/asset_compress

安装

您可以使用composer将此插件安装到您的CakePHP应用程序中。

安装composer包的推荐方法是

composer require bor-attila/cakephp-rollup

在您的Application.php中启用插件

$this->addPlugin('CakephpRollup');

作为包管理器。我将使用yarn，但如果你愿意，也可以使用npm。

如果没有，在webroot目录中使用yarn创建一个package.json。

cd webroot
yarn init

创建默认文件夹结构并创建基本文件。

bin/cake rollup:init

成功执行此命令后，您的WEBROOT目录应如下所示。

+-- css
+-- scss
|   +-- style.scss
+-- plugins
+-- js
|   +-- src
|       +-- components
|       +-- mixins
|       +-- static
|           +-- script.js
|       +-- main.app.js
+-- babel.config.json
+-- rollup.config.js
+-- packages.json

css文件夹包含编译后的样式表。您可以添加此行到gitignore

webroot/css/*.min.css

scss文件夹包含样式表源代码。plugins文件夹包含静态的生产就绪第三方库（例如，bootstrap，axios，select2）。js文件夹包含编译后的javascript文件。您可以添加此行到gitignore

webroot/js/*.min.js

js/src文件夹包含javascript应用(!)源文件 - vue，react等... 例如：x.app.js，y.app.js。 js/src/components文件夹包含javascript应用组件源文件。 js/src/mixins文件夹包含可重用的javascript组件。 js/src/static文件夹包含可以直接包含到页面中的javascript源代码（'旧方式'）。

与样式表协同工作

安装依赖

您需要安装DartSDK！

yarn add dart-sass

将这些脚本添加到您的package.json

"scripts": {
    "rollup:scss:build": "`../bin/cake rollup:sass`",
    "rollup:scss:watch": "`../bin/cake rollup:sass -w`"
    "rollup:scss:clean": "rm -f css/*.min.css"
}

SCSS命令

生产环境

当你运行yarn rollup:scss:build时，来自scss文件夹的所有以字母开头的sass文件都将编译成css并压缩。

例如

  • scss/style.scss -> css/style.min.css
  • scss/mystyle.scss -> css/mystyle.min.css
  • scss/_variables.scss保持不变（当然，如果您将其包含在您的style.scss中，则会被编译）

开发环境

当您运行 yarn rollup:scss:watch 时，所有以字母开头的 scss 文件（^[a-zA-Z]）将从 scss 文件夹中编译成 css，并且 sass 编译器将监听文件变化。

辅助函数

CSS 辅助函数

在 View\AppView.php 中，将以下代码添加到 initialize 方法中，用于解释：

$this->loadHelper('CakephpRollup.Css');

或者：

$this->loadHelper('CakephpRollup.Css', [
    'storage' => [
        'body' => ['bodyclass'],
    ]
]);

CSS 辅助函数仅仅是数组操作。在容器中，您可以存储类名。

add(string $container, string $class, ?string $overwrite = null): bool
remove(string $container, string $class): bool
has(string $container, string $class): bool
get(string $container): string

<html>
    <head>
    </head>
    <body <?= $this->Css->get(); ?>>

        //In the tempalte
        $this->Css->add('body', 'green');

        //Or conditionally
        if (true) {
            $this->Css->add('body', 'red', 'green');// the green will be replaced with red
            $this->Css->remove('body', 'red');// or remove
        }

    </body>
</html>

样式表辅助函数

在 View\AppView.php 中，将以下代码添加到 initialize 方法中

$this->loadHelper('CakephpRollup.Stylesheet', [
    'cache' => 'default'
]);

样式表辅助函数 帮助加载 CSS 文件内容并将其直接注入到 body 中。这些方法会搜索指定的 CSS 文件，打开文件，创建一个 style 标签并将其存储到缓存中（如果设置了缓存）。

global(array $stylesheets = []): string

返回全局样式表的内容。自动搜索 css/style[.hash]?[.min]?.css。您可以将更多 CSS 文件作为参数添加。

local(): string

返回本地样式表的内容。自动搜索

  • css/{prefix}-{controller}-{action}[.hash]?[.min]?.css
  • 如果没有前缀，则返回 css/{controller}-{action}[.hash]?[.min]?.css
inline(string $name): string

返回指定样式表的内容。自动搜索 css/{name}[.hash]?[.min]?.css

与 JavaScript 一起工作

安装依赖

yarn add rollup rollup-plugin-terser @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-json
yarn add core-js@3 @babel/core @babel/preset-env @rollup/plugin-babel

将这些脚本添加到您的package.json

"scripts": {
    "rollup:js:build": "rollup -c",
    "rollup:js:watch": "rollup -c --w",
    "rollup:js:clean": "rm -f js/*.min.js"
}

辅助函数

JavaScript 辅助函数

在 View\AppView.php 中，将以下代码添加到 initialize 方法中

$this->loadHelper('CakephpRollup.Javascript', [
    'cache' => 'default'
]);

如何使用

<html>
    <head>
    </head>
    <body>
        ....
        <?= $this->Html->script($this->Javascript->files('main', 'debug', 'awesome')); ?>
        <!--
            This returns
            <script src="js/main.laknsdn78t7f34t79.min.js" />
            <script src="js/debug.sanibiobrevoybowueb.min.js" />
            <script src="js/awesome.wqojndiqwd766686.min.js" />
            or even
            <script src="js/main.min.js" />
            <script src="js/awesome.min.js" />
        -->
    </body>
</html>