CSS minification in AEM

Avatar

Avatar
Validate 1
Level 2
yogeshVaidya
Level 2

Likes

6 likes

Total Posts

16 posts

Correct reply

0 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 1
Applaud 5
View profile

Avatar
Validate 1
Level 2
yogeshVaidya
Level 2

Likes

6 likes

Total Posts

16 posts

Correct reply

0 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 1
Applaud 5
View profile
yogeshVaidya
Level 2

28-01-2019

I have used min:yui for CSS minification and min:gcc;compilationLevel=whitespace for js minification.

js minification is working as expected(removing linebreaks and spaces) but CSS minification is only removing spaces. linebreaks are still present for CSS minification.

I have found Minify JS CSS  this thread but Don't know how to make changes for removing linebreaks.

I am using AEM 6.3 and yui compressor version is 2.4.8

Replies

Avatar

Avatar
Boost 250
MVP
Gaurav-Behl
MVP

Likes

250 likes

Total Posts

1,147 posts

Correct reply

283 solutions
Top badges earned
Boost 250
Establish
Give back 300
Give Back 50
Give Back 5
View profile

Avatar
Boost 250
MVP
Gaurav-Behl
MVP

Likes

250 likes

Total Posts

1,147 posts

Correct reply

283 solutions
Top badges earned
Boost 250
Establish
Give back 300
Give Back 50
Give Back 5
View profile
Gaurav-Behl
MVP

28-01-2019

Based on how you've configured min:yui, use either of below and test -

pom.xml:

<!-- If this is zero, you will get line breaks after every line in the aggregated file. -->
  <linebreakpos>-1</linebreakpos>

OSGI config:

min:yui;line-break=-1

Default config for CSS processors in the format: "mode:(name(;options))". eg: min:yui;obfuscate=true (htmllibmanager.processor.css)

YUI Compressor

--line-break

  Some source control tools don't like files containing lines longer than,

  say 8000 characters. The linebreak option is used in that case to split

  long lines after a specific column. It can also be used to make the code

  more readable, easier to debug (especially with the MS Script Debugger)

  Specify 0 to get a line break after each semi-colon in JavaScript, and

  after each rule in CSS.

Avatar

Avatar
Ignite 1
Level 1
ajeemaww9196509
Level 1

Likes

0 likes

Total Posts

11 posts

Correct reply

0 solutions
Top badges earned
Ignite 1
Give Back
View profile

Avatar
Ignite 1
Level 1
ajeemaww9196509
Level 1

Likes

0 likes

Total Posts

11 posts

Correct reply

0 solutions
Top badges earned
Ignite 1
Give Back
View profile
ajeemaww9196509
Level 1

29-10-2019

I have the same problem. But still I could not solve that by these answers. Can someone help me out.

Avatar

Avatar
Coach
Employee
Jörg_Hoh
Employee

Likes

1,134 likes

Total Posts

3,161 posts

Correct reply

1,079 solutions
Top badges earned
Coach
Give back 600
Ignite 5
Ignite 3
Ignite 1
View profile

Avatar
Coach
Employee
Jörg_Hoh
Employee

Likes

1,134 likes

Total Posts

3,161 posts

Correct reply

1,079 solutions
Top badges earned
Coach
Give back 600
Ignite 5
Ignite 3
Ignite 1
View profile
Jörg_Hoh
Employee

29-10-2019

Hi,

If you don't get it work, you might try to move all the CSS/JS postprocessing into a dedicated build step and use the frontend build process of the newer archetypes (see [1] for the ui.frontend module created by archetype 21). Depending on your frontend developers they might prefer that way over the "classic approach" 🙂

Jörg

[1] aem-project-archetype/src/main/archetype/ui.frontend at aem-project-archetype-21 · adobe/aem-project...

Avatar

Avatar
Ignite 1
Level 1
ajeemaww9196509
Level 1

Likes

0 likes

Total Posts

11 posts

Correct reply

0 solutions
Top badges earned
Ignite 1
Give Back
View profile

Avatar
Ignite 1
Level 1
ajeemaww9196509
Level 1

Likes

0 likes

Total Posts

11 posts

Correct reply

0 solutions
Top badges earned
Ignite 1
Give Back
View profile
ajeemaww9196509
Level 1

29-10-2019

Hi ,

Before tying that I'm just asking, Currently we are using NPM to build the frontend package, So Is there any way to solve the issue along with our current process rather going to maven setup??

Avatar

Avatar
Coach
Employee
Jörg_Hoh
Employee

Likes

1,134 likes

Total Posts

3,161 posts

Correct reply

1,079 solutions
Top badges earned
Coach
Give back 600
Ignite 5
Ignite 3
Ignite 1
View profile

Avatar
Coach
Employee
Jörg_Hoh
Employee

Likes

1,134 likes

Total Posts

3,161 posts

Correct reply

1,079 solutions
Top badges earned
Coach
Give back 600
Ignite 5
Ignite 3
Ignite 1
View profile
Jörg_Hoh
Employee

31-10-2019

Actually the "new" approach isn't new at all. It just embeds a node-based frontend development process and allows to use maven to run node/npm as well.

Thus your FE devs can work within the ui.frontend module and use their tooling. And if you build everything through a jenkins or any other buildserver, you can use maven, and the FE pipeline is invoked as well.

But if you already use NPM, why don't you do the minifaction there already and disable any postprocessing within AEM?