Jump to content

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


Stefanowitsch
 Share

Recommended Posts

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.

image.png.a074556ac2fc1a748264c21db10bbe02.png

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!

  • Like 6
  • Thanks 1
Link to comment
Share on other sites

  • 2 weeks later...
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')

 

  • Like 1
Link to comment
Share on other sites

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. 😉")

  • Like 1
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.
 

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...