bor-attila / cakephp-rollup
Rollup plugin for CakePHP for better CSS/JS
Installs: 981
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 2
Forks: 0
Open Issues: 0
Type:cakephp-plugin
Requires
- php: >=7.2
- cakephp/cakephp: 4.x
This package is auto-updated.
Last update: 2022-12-23 11:56:27 UTC
README
This plugin it's not really about the code, it just gives you a structure how to handle CSS/JS, and some helper method.
SEO is not a problem ? You want a full client-side rendered frontend ? Then maybe you should check inertiajs. SEO or SSR is not a problem ? You want to use CakePHP as a backend and build the entire frontend in JS ? Then you should check vuejs. You want just an 'assetcompressor' ? Then you should check markstory/asset_compress
Installation
You can install this plugin into your CakePHP application using composer.
The recommended way to install composer packages is:
composer require bor-attila/cakephp-rollup
Enable the plugin in your Application.php:
$this->addPlugin('CakephpRollup');
As package manager. I will use yarn, but you can use npm if you want.
Create a package.json in the webroot directory with yarn if you don't have one.
cd webroot
yarn init
Create the default folder structure and create the basic files.
bin/cake rollup:init
After you successfully executed this command, your WEBROOT directory should look like this.
+-- css
+-- scss
| +-- style.scss
+-- plugins
+-- js
| +-- src
| +-- components
| +-- mixins
| +-- static
| +-- script.js
| +-- main.app.js
+-- babel.config.json
+-- rollup.config.js
+-- packages.json
The css folder contains the compiled stylesheets. You can add this line to gitignore
webroot/css/*.min.css
The scss folder contains the stylesheet source code.
The plugins folder contains static production ready third party libraries (eg. bootstrap, axios, select2).
The js folder contains the compiled javascript files. You can add this line to gitignore
webroot/js/*.min.js
The js/src folder contains javascript app(!) source files - vue, react etc... Eg: x.app.js, y.app.js.
The js/src/components folder contains javascript app components source files.
The js/src/mixins folder contains javascript reusable components.
The js/src/static folder contains javascript source code that can be included directly into page ('old way').
Working with stylesheets
Install dependencies:
You will need DartSDK installed!
yarn add dart-sass
Add these scripts into your 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 commands
Production
When you run yarn rollup:scss:build all sass files from scss folder which starts with a letter (^[a-zA-Z]) will be compiled into
css and minimized.
For example:
- scss/style.scss -> css/style.min.css
- scss/mystyle.scss -> css/mystyle.min.css
- scss/_variables.scss remains untouched (ofc if you included in your style.scss then will be compiled)
Development
When you run yarn rollup:scss:watch all sass files from scss folder which starts with a letter (^[a-zA-Z]) will be compiled into
css and the sass compiler will listen to file changes.
Helpers
CSS helper
In View\AppView.php add this to the initialize method for expl:
$this->loadHelper('CakephpRollup.Css');
OR
$this->loadHelper('CakephpRollup.Css', [ 'storage' => [ 'body' => ['bodyclass'], ] ]);
The CSS helper is just an array manipulation. In the container you can store class names.
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>
StyleSheet helper
In View\AppView.php add this to the initialize method:
$this->loadHelper('CakephpRollup.Stylesheet', [ 'cache' => 'default' ]);
The StyleSheet helper helps to load CSS file content and inject it directly into the body. These methods search for specified CSS files, opens, creates a style tag and stores it into cache (if it's set).
global(array $stylesheets = []): string
Returns the global stylesheet's content. Automatically searches for the css/style[.hash]?[.min]?.css You can add more CSS files as parameter.
local(): string
Returns the local stylesheet's content. Automatically searches for:
- css/{prefix}-{controller}-{action}[.hash]?[.min]?.css
- css/{controller}-{action}[.hash]?[.min]?.css if there is no prefix.
inline(string $name): string
Returns the given stylesheet's content. Automatically searches for the css/{name}[.hash]?[.min]?.css
Working with Javascript
Install dependencies:
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
Add these scripts into your package.json
"scripts": {
"rollup:js:build": "rollup -c",
"rollup:js:watch": "rollup -c --w",
"rollup:js:clean": "rm -f js/*.min.js"
}
Helpers
Javascript helper
In View\AppView.php add this to the initialize method:
$this->loadHelper('CakephpRollup.Javascript', [ 'cache' => 'default' ]);
How to use:
<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>