4

I am wondering about any "best practices" to integrate a "modern JavaScript build workflow" into a Maven build that produces a WAR artifact.

I have found several maven plugins that handle concatenation and minification:

However I am still missing how they fit into a full build workflow, since I think it is mandatory to be able to switch concatenation/minification on and off:

For development I want to build a WAR that does not contain the concatenated/minified resources so that I can conveniently debug. For a production build I want to produce a WAR that contains the concatenated/minified resources.

Additionally for the production build I then have to "rewrite" the script URLs in my html to point to the concatenate/minified version(s) of the script(s).

In the JavaScript world I would use Grunt with different grunt tasks (uglify, usemin) to achieve the above workflow. How can I achieve the same in a Maven build?

Beryllium
  • 12,808
  • 10
  • 56
  • 86
jbandi
  • 17,499
  • 9
  • 69
  • 81
  • I know that this is an old thread, I got here in one of my searches in a complete different matter. So I read the question and I think that the answer provided by @JamesMurphy is ok, regarding the second part you mention in your comment `struggling with how can I "rewrite" my HTML so that it uses the non-minified or the minified JavaScript`, why do you need to use different files at all? I would use in my html `someScritp.js` and in for a development it would be non-minified and for production it would be minified. Would that be a good solution? – Jorge Campos Jan 27 '17 at 20:10
  • @JorgeCampos The standard optimization steps for a modern frontend project are minification, concatenation/bundling and cache-busting. For development you want fine-grained files while in productions you want only very few files containing all your assets (JS, CSS ...). Optimizing many files into few files is called *concatenation* or *bundling*. Typically you also want to "cache-bust" the files by adding a hash to the filename. These new files have then to be referenced as ` – jbandi Jan 30 '17 at 06:43
  • Thanks for the info and heads up @jbandi :) – Jorge Campos Jan 30 '17 at 11:37

2 Answers2

3

Since you mentioned Grunt, have you considered calling Grunt tasks directly from your Maven build? It's not a perfect solution, but it gives you some more options without relying on Maven plugins. http://addyosmani.com/blog/making-maven-grunt/

Also, this SO topic: Javascript web app and Java server, build all in Maven or use Grunt for web app?

Community
  • 1
  • 1
Jeff Smith
  • 695
  • 6
  • 14
2

You should be able to run maven with different profiles so you can minify js scripts for a production build but build it locally with a different profile for the purposes of debugging.

There's more information about this on Maven's build profile page

Hope this helps.

James Murphy
  • 800
  • 1
  • 15
  • 29
  • Thanks for your answer. Using Maven profiles solves the first part of my question: How to switch the minification on and off for different builds. However I am still struggling with how can I "rewrite" my HTML so that it uses the non-minified or the minified JavaScript. Is there another Maven plugin for that? – jbandi Sep 08 '13 at 11:13
  • Hi again, no problem. It looks like the answer was already found in another Stack Overflow question... [How do you automate javascript minification for your java web applications](http://stackoverflow.com/questions/1379856/how-do-you-automate-javascript-minification-for-your-java-web-applications). It looks like you can use YUICompressor ant target. You can use the maven-antrun-plugin to execute an ant goal at whatever point you want in your Maven build. I think that should be enough for you to do what you want. – James Murphy Sep 10 '13 at 20:59
  • 1
    In answer to your question, you could in theory write a bash script that scans all your HTML files and replaces the *.js files with *.min.js if they are located in the same directory. Although I don't know if there is anything out-of-the-box that will do this for it. It's potentially a bit bespoke so unfortunately you may have to write this yourself. – James Murphy Sep 10 '13 at 21:05
  • If you're using a scripting language like PHP or even JSPs you may be able to write a method that checks if there is a setting to enable the build to use minified js. In which case, then it can precede the *.js with *.min.js as required. – James Murphy Sep 10 '13 at 21:10
  • 1
    @ Dropkick: Thanks for your comments. I am still hoping that there is something more mature out there that I have not found yet ... I just think that this should be a standard problem that should have a standard solution... – jbandi Sep 11 '13 at 21:52