MAKING MAVEN AND

GRUNT PLAY NICEPresented by Zoran Nikolovski

• The number one requirement from a build process is SPEED

• Maven is a great build tool

– Not exactly known for it’s speed of execution

– On average a maven AEM build takes 4-8 minutes to complete

• Grunt builds consistently take <1min

• Maven and Grunt have more similarities than differences

– Dependency management

– Plugin management

– Assembly and composition

– Orchestration

– Deployment

– Reporting

• So why are we butting heads over which tool to use?

– Generally it’s to do with CSS precompilers

– And specific code organisation requirements in AEM

• Can we all just get along?

OF COURSE WE CAN!

• Couple of pre-requisites

– Certain organisational skills

– The WILL to work TOGETHER

• Couple of pre-requisites

– Certain organisational skills

– The WILL to work TOGETHER

• Really – I cannot stress this enough

• Code organisation and structure

– Use the atomic design approach

– Have a clientlib per component (module/molecule) with a common category

• categories="[common-component.category]"

– “Assemble” them in a main etc clientlib

• categories="[common-content.category]”

• embed="[common-component.category]”

• Working TOGETHER

– One code base – these days with Sightly it’s even easier

• The component is an HTML file!

– Everyone works in AEM

• No STATIC HTML

– This has many, MANY benefits

• Collaboration

• Joined ownership

• Visibility

• Transparency

• …

• Make Maven Grunt

– The missing link: eirslett/frontend-maven-plugin[0]

• Automatically installs Node.js

• Automatically installs NPM

• Automatically installs Grunt

• Runs according the Gruntfile.js

– Have you figured out the coolest thing?

[0]: https://github.com/eirslett/frontend-maven-plugin

• Make Maven Grunt

– The missing link: eirslett/frontend-maven-plugin

• Automatically installs Node.js

• Automatically installs NPM

• Automatically installs Grunt

• Runs according the Gruntfile.js

– Have you figured out the coolest thing?

• No need to drag all these installables around!

• Make Maven Grunt

– If using SASS is your thing

• Have your SASS file under the component clientlibs

• Don’t check in CSS into SCM

• Configure grunt to compile your SASS -> CSS in the /target folder

– /src/main/content/jcr_root/content/project/app/components/component/clientlibs/sass/file.scss ->

/target/classes/apps/components/component/clientlibs/css/file.css

• Make Maven Grunt

– Use profiles

• Allow front-end build to run independently from back-end

• Speed!!!

– Grunt vault plugin to push changes to AEM

• Make Maven Grunt

– Use profiles

• Allow front-end build to run independently from back-end

• Speed!!!

– Grunt vault plugin to push changes to AEM

– CAVIET!

• Make sure to always touch the css.txt and js.txt files for all clientlibs!

• This will ensure that AEM will refresh them

• Make Maven Grunt

– The rest is really the same

– Still using maven vault plugin to install items to AEM

– Profiles to encapsulate properties for each environment

– Curl to deploy artefacts

– The back-end build still takes 4-8 minutes to complete

• Which is OK because we’re patient

• Benefits

– One shared build pipeline

• Adding profiles allow you to control what gets executed

– Speed

• Front-end won’t trade-in speed for collaboration

– Transparency

• No more STATIC files and integration nightmare

– Portability

• The tools and their configuration are encapsulated in the project

THANK YOU!

• Presentation: Will be on SlideShare