closure-compiler-maven-plugin
closure-compiler-maven-plugin copied to clipboard
blutorange
Substituting <script> tags in HTML with merged values
I thing this plugin does a great job but this feature is, IMHO, missing and makes the merge feature less usable. I saw that you created the bundle feature in 1.7.5 (great!) and that could be the starting point to substitute in the HTML files the old css/js script/link tags with the new ones. In my scenario I have a single page app with only one HTML containing all the imports. I am using Angular JS which is best managed with several js files (50+). It would be great to bundle all of them into a single file and change the script tag so that I only import that single file. That would improve performances a lot!
It is a nice to have, but nothing really critical since, while the HTTP request for 50+ files may be not ideal, for single page apps this is performed only once.
Thanks Andrea
+1 for this feature to be implemented as I'm facing exactly the same challenges Andrea mentioned, however in my scenario I don't have a single page app.
+1 from me, too. i like the plugin but if i use it, my complete project depends on maven because i have to link a script file which does not exist until maven creates it.
+1 also. If it is possilbe, it will be great to do so. I have a single-page app and all I need is to have over 50 scripts or only 2, depending on profile
@grantsunny
Is there still any interest in this? I could imagine the following approach, what do you think?
For each execution, add a configuration to the plugin for the HTML and for selecting a script tag in the file, e.g. by ID. The plugin would then replace the src attribute of the script tag with the path to the minified JavaScript file, relative to the HTML file.
<!-- Configure resources so that target/generated-resources/frontend/js -->
<!-- is copied to target/classes -->
<configuration>
<htmlRoot>src/main/resources/webapp</htmlRoot>
<scriptRoot>target/generated-resources/frontend/js</scriptRoot>
<baseTargetDir>target/generated-resources/frontend/js</baseTargetDir>
</configuration>
<executions>
<execution>
<configuration>
<targetDir>public/resources/main</targetDir>
<outputFilename>script.min.js</outputFilename>
<htmlOutput>
<htmlFile>src/main/resources/webapp/public/pages/profile/index.html</htmlFile>
<scriptId>main</scriptId>
</htmlOutput>
<configuration>
</execution>
<execution>
<configuration>
<targetDir>public/resources/special/other</targetDir>
<outputFilename>script.min.js</outputFilename>
<htmlOutput>
<htmlFile>src/main/resources/webapp/public/pages/sub/dashboard/index.html</htmlFile>
<scriptId>other</scriptId>
</htmlOutput>
<configuration>
</execution>
</executions>
This will create 2 minified files
-
target/generated-resources/frontend/js/public/resources/main/script.min.js -
target/generated-resources/frontend/js/public/resources/special/other/script.min.js
These files are put in target/classes/public/resources/main/script.min.js and target/classes/public/resources/special/other/script.min.js, respectively.
src/main/resources/webapp/public/pages/profile/index.html might look like
<html>
<body>
<script id="main"></script>
</body>
</html>
The src attribute of the script with the ID main will be set to the script file.
The path of src/main/resources/webapp/public/pages/profile/index.html relative to the HTML root src/main/resources/webapp is public/pages/profile/index.html.
The path of target/generated-resources/frontend/js/public/resources/main/script.min.js relative to the script root target/generated-resources/frontend/js is public/resources/main/script.min.js.
Therefore, the path public/resources/main/script.min.js relative to public/pages/profile/index.html is ../../resources/main/script.min.js. Finally, the HTML is changed to
<html>
<body>
<script id="main" src="../../resources/main/script.min.js"></script>
</body>
</html>
Similarly, for the second script file, the HTML file becomes:
<html>
<body>
<script id="other" src="../../../resources/special/other/script.min.js"></script>
</body>
</html>
When no htmlRoot or scriptRoot is given, the folder of the real location of the files on the file system is used.
Thanks @blutorange for following this up! To share my 2 cents. Most cases, when I am playing it with development environment, I will simply use
<script src="script.js"></script>
And after the build, we expect it help me automatically update the html into
<script src="script.min.js"></script>
Above design will satisfy this use case good. It is also a wise idea to leverage the script id to locate to the right
However, this design of configuration might worthy second consideration when we wanted to deal with use case as below :), I would say it can be a relevant rare case, perhaps we can consider that later on.
<html>
<body>
<script id="main" src="../../resources/main/script.min.js"></script>
<script id="other" src="../../../resources/special/other/script.min.js"></script>
</body>
</html>
@grantsunny
You can try out version 2.32.0-SNAPSHOT if you'd like. See the site for documentation on the new options, as well as the JavaDocs for HtmlUpdate and the Mojo goal docs. Let me know what you think -- I can still change some settings if it helps.
However, this design of configuration might worthy second consideration when we wanted to deal with use case as below :), I would say it can be a relevant rare case, perhaps we can consider that later on.
I'm not quite sure what your setup is, but the configuration should be flexible enough to achieve this -- you can use multiple executions, multiple htmlUpdates per execution, as well as update multiple HTML files and script tags per htmlUpdate.