RockFrontend Wiki: The new minify feature and how to handle asset loading

[Stefanowitsch]

A big shout-out and thank-you to @bernhard for keeping on improving the RockFronend. (and the whole Rock-EcoSystem) continuously. I asked for a minify-feature and here it is!

I am using RockFrontend in every project now as it combines some must-have features for frontend development (IMHO!).

Today a new feature was added (or lets say improved as auto-minify was included before)

The Minify Feature (for Styles and Scripts!)

See the Wiki entry here

 

Lets start simple: How do I include stylesheets with RockFrontend in the first place?

RockFrontend always had the feature to bundle stylesheets via the styles() function.

For example I am loading some LESS partials into my header like this. You don't have to use LESS files, regular CSS files work the same.

Note: Since RockFrontend offers LESS support you can add those files directly, no need to compile them and add the CSS files. For this you have to install the ProcessWire Less module.

 <? $rockfrontend->styles()
  ->add($config->urls->templates . 'styles/less/uikit/_custom-import.less') // add single LESS or CSS file
  ->addAll($config->urls->templates . 'styles/less/project') // point to folder to include files automatically
  ->addAll($config->urls->templates . 'styles/less/custom')
?>

The result in this case is a single compiled CSS file that will be included in your head automatically.

RockFrontend is very smart. You don't have to include tons of partial LESS project files here. Just use the addAll() function and point to a folder where your assets are saved and the module does the import for you.
This is how my folder structure looks like. If I create new LESS files in there, they will be added and compiled automatically at runtime.

How to minify

For debugging and development purposes I don't use the minify feature. Instead I use it on the staging server exclusively.

To generate a minified version of your stylesheet just add minify(true)

<? $rockfrontend->styles()
  ->add($config->urls->templates . 'styles/less/uikit/_custom-import.less')
  ->addAll($config->urls->templates . 'styles/less/project')
  ->addAll($config->urls->templates . 'styles/less/custom')
  ->minify(true);
?>

If you want to chain the minify function it to your debug-mode state you can do it like this (my preferred solution).

 <? $rockfrontend->styles()
  ->add($config->urls->templates . 'styles/less/uikit/_custom-import.less')
  ->addAll($config->urls->templates . 'styles/less/project')
  ->addAll($config->urls->templates . 'styles/less/custom')
  ->minify(!$config->debug);
?>

That's it!

Does minify work with Scrips?

Yes, exactly the same. But you make use of the scripts() function in this case.

<? $rockfrontend->scripts()
  ->add($config->urls->templates . 'scripts/script1.js')
  ->add($config->urls->templates . 'scripts/script2.js')
  ->add($config->urls->templates . 'scripts/script3.js')
  ->minify(!$config->debug);
?>

Note that these script files are not bundled (even if you chose minify false). Instead they all come out as minified versions separately.

I find that this workflow I straight forward and it combines some of the best features that RockFrontend offers! If you combine this with the awesome autorefresh feature, frontend development becomes a breeze!

[bernhard]

Thx for the great writeup!! ? Also thx for the great feedback over the last few weeks!

I've added a link to this tutorial to the wiki! ?

[bernhard]

On 2/28/2023 at 10:46 PM, Stefanowitsch said:

 <? $rockfrontend->styles()
  ->add($config->urls->templates . 'styles/less/uikit/_custom-import.less') // add single LESS or CSS file
  ->addAll($config->urls->templates . 'styles/less/project') // point to folder to include files automatically
  ->addAll($config->urls->templates . 'styles/less/custom')
?>

Thx again for the great post! Just realised that you are using old-school paths, this would also work (I call it smart paths):

<?php
$rockfrontend->styles()
  ->add('styles/less/uikit/_custom-import.less') // add single LESS or CSS file
  ->addAll('styles/less/project') // point to folder to include files automatically
  ->addAll('styles/less/custom')

// or this would also work (even if pw lives in a sub-folder!)
$rockfrontend->styles()
  ->add('/site/templates/styles/less/uikit/_custom-import.less') // add single LESS or CSS file
  ->addAll('/site/templates/styles/less/project') // point to folder to include files automatically
  ->addAll('/site/templates/styles/less/custom')

 

[wbmnfktr]

Are all these details you talk about here (and in some other threads) documented somewhere?

I looked up, read and tried everything from Github (README, Wiki), YouTube (which gave me the final "Try it now!"), the Forums, all threads... but somehow I feel various parts are missing - at least for me. I really try to use RockMigrations in one or another real project... but for now only SUPER simplified.

Then... in some other threads (like this) people are super happy, like @Stefanowitsch and @dotnetic.

Did I miss something? Is there a doc/guide/howto about all those classes/functions/hooks/methods/options/younameit... OR did you all read through the module to find out what's probably possible in some way?

 

(Please don't ask what I am missing in the docs. The answer would be: "Almost everything! B'cause I'm stupid. ?")

[bernhard]

Thx for the feedback @wbmnfktr I'm a little confused - are we talking about RockMigrations or RockFrontend? Or both?

I know that the docs can be improved in most of the modules. The problem is that it's really not an easy task for me. Any help like this great post by @Stefanowitsch is very welcome. The problem that I have with the github readme is that it get's too long for modules like RF and RM. That's why I started using github wikis - but I'm not really happy with them. They are not part of the version controlled files and so they are not connected with specific releases of the module. But I already have a plan to improve that ? 

Maybe you can share your experience a little more detailed? What is your goal? Why do the modules look interesting? What parts do you want to use? How did you try that? Where exactly did you fail?

[Stefanowitsch]

11 hours ago, wbmnfktr said:

Are all these details you talk about here (and in some other threads) documented somewhere?

I looked up, read and tried everything from Github (README, Wiki), YouTube (which gave me the final "Try it now!"), the Forums, all threads... but somehow I feel various parts are missing - at least for me. I really try to use RockMigrations in one or another real project... but for now only SUPER simplified.

Then... in some other threads (like this) people are super happy, like @Stefanowitsch and @dotnetic.

Did I miss something? Is there a doc/guide/howto about all those classes/functions/hooks/methods/options/younameit... OR did you all read through the module to find out what's probably possible in some way?

(Please don't ask what I am missing in the docs. The answer would be: "Almost everything! B'cause I'm stupid. ?")

My interest in in RockFrontend was initiated as the module was launched last year:

At first only because of the auto-refresh feature. Being tired of hitting F5 all the time that feature alone (!) made development far more enjoyable for me.

Even back then RF offered many many features, most of them I still don't use today (shame on me!). Plus - @bernhard is constantly adding new features to this module and I have to say that it's hard to keep track sometimes. 

For example I just learned "by accident" about the new rf-scrollclass feature ?

So simultaneously you have to keep 3 different places up-to-date when new changes arrive:
- Github
- The PW module page entry
- The module thread in the PW forum

oh and also Youtube ?

Therefore I can agree - I find myself from time to time looking for "that one thing that I read" and I don't find it anymore. In that case I ask Bernhard personally via PM like "how do I do this and that?". If it's something that is not supported by RF yet but would be useful it is not unlike that Bernhard will include it in a new version.

I think people have to see RockFrontend as a big toolbox. You don't need everything in it. You only grab the tools you need for your current task.
 

 

[nurkka]

On 2/28/2023 at 10:46 PM, Stefanowitsch said:

The result in this case is a single compiled CSS file that will be included in your head automatically.

@bernhard Hi Bernhard,

I found this info from @Stefanowitsch here, but it seems to be outdated. I set up a new website with all new versions of RockSuite today, and my added scripts and styles are not compiled into one JS or one CSS file. RockFrontend keeps them as single script and style files.
Is it possible to minify and concatenate scripts and styles to compile them into one single script file and one single styles file?

Additionally, I would want to prevent RockPageBuilder.min.css and RockFrontend.min.js from being loaded in the Frontend when debug mode is off and the site is not accessed by a superuser or frontend editor user.
Is that possible?

[bernhard]

Hey @nurkka thx for your questions!

5 minutes ago, nurkka said:

I set up a new website with all new versions of RockSuite today,

What do you mean exactly? Which modules did you install?

5 minutes ago, nurkka said:

and my added scripts and styles are not compiled into one JS or one CSS file.

This is expected. RockFrontend will only compile all .less files to one.css file. All other files will stay single files. This is because on some pages we might need some scripts, on others not. If all were compiled to one single file we'd have different files on different pages or we'd keep recreating this file over and over again when viewing different pages.

7 minutes ago, nurkka said:

Is it possible to minify and concatenate scripts and styles to compile them into one single script file and one single styles file?

At the moment no, for the mentioned reason. I thought about adding such a feature, but I think it would cause trouble.

8 minutes ago, nurkka said:

Additionally, I would want to prevent RockPageBuilder.min.css and RockFrontend.min.js from being loaded in the Frontend when debug mode is off and the site is not accessed by a superuser or frontend editor user.
Is that possible?

RF/RPB try to be as unopinionated about the frontend as possible, but some things need to be there to make it work. Can you please show me the content of these files?

[nurkka]

Hi @bernhard, thanks for your reply!

1 hour ago, bernhard said:

Which modules did you install?

RockFrontend, RockPageBuilder, AdminStyleRock, RockShell, RockAdminTweaks and RockMigrations.

59 minutes ago, bernhard said:

This is expected. RockFrontend will only compile all .less files to one.css file.

Thanks for the info – then I misunderstood the feature. In most cases, I am still working with one css and one js file per website. I assume that RockPageBuilder only adds the block specific styles and scripts when they are really needed on a specific page, so concatenating and compiling everything into single files wouldn't work.

1 hour ago, bernhard said:

RF/RPB try to be as unopinionated about the frontend as possible, but some things need to be there to make it work. Can you please show me the content of these files?

Currently I only have them locally within a DDEV container and I would not copy them into the forum, so for the moment only have the full paths of those 2 files. But I assume they must be the same as in your GitHub repos, so perhaps the info is ok:
/site/modules/RockFields/assets/RockPageBuilder.min.css
/site/modules/RockFrontend/RockFrontend.min.js

I had a closer look: RockFrontend.min.js has code to handle the consent manager and scrollclass features. RockPageBuilder.min.css has styles for handling margins, paddings, alignment etc. I assume these are styles which are needed for the Frontend Editor. I currently believe that I would not need both of the files in my frontend, when it's visited by guest users, as I am not using the mentioned features.

Would it be possible via a hook to check if debug mode is off and the current request comes from a guest user, and remove the files from the scripts and styles arrays before they are rendered?