Download the PHP package bor-attila/cakephp-rollup without Composer
On this page you can find all versions of the php package bor-attila/cakephp-rollup. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download bor-attila/cakephp-rollup
More information about bor-attila/cakephp-rollup
Files in bor-attila/cakephp-rollup
Package cakephp-rollup
Short Description Rollup plugin for CakePHP for better CSS/JS
License MIT
Informations about the package cakephp-rollup
Rollup plugin for CakePHP
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:
Enable the plugin in your Application.php:
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.
Create the default folder structure and create the basic files.
After you successfully executed this command, your WEBROOT directory should look like this.
The css
folder contains the compiled stylesheets. You can add this line to gitignore
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
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!
Add these scripts into your package.json
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:
OR
The CSS helper is just an array manipulation. In the container you can store class names.
StyleSheet helper
In View\AppView.php add this to the initialize method:
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).
Returns the global stylesheet's content. Automatically searches for the css/style[.hash]?[.min]?.css You can add more CSS files as parameter.
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.
Returns the given stylesheet's content. Automatically searches for the css/{name}[.hash]?[.min]?.css
Working with Javascript
Install dependencies:
Add these scripts into your package.json
Helpers
Javascript helper
In View\AppView.php add this to the initialize method:
How to use: