Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Maven plugin to concat and minify javascript

Tags:

I have 100s of javascript files inside the hierarchy of folders and I want two sets of output. one is to have a concatenated version for debugging purposes and the other one is to have a concat + minfy version. I am currently using the below plugin but in this I need to provide each and every file that I need to minify. I am looking for a plugin which needs only parent folder and satisfy the above conditions.

<groupId>com.samaxes.maven</groupId>
<artifactId>minify-maven-plugin</artifactId>
<version>1.7</version>
like image 822
Mady Avatar asked May 25 '13 07:05

Mady


People also ask

How do you minify in JavaScript?

To minify JavaScript, try UglifyJS. The Closure Compiler is also very effective. You can create a build process that uses these tools to minify and rename the development files and save them to a production directory.

Should you minify JavaScript?

It is important to minify your CSS and minimise JavaScript files so they can load faster on your web pages. There are many reasons why you should minify your CSS and JavaScript: Reduce file size: The more code there is in a file, the larger it will be. Minified code is usually much smaller than the original version.

How does Minify JavaScript work?

How Minification Works. Minification works by analyzing and rewriting the text-based parts of a website to reduce its overall file size. Minification extends to scripts, style sheets, and other components that the web browser uses to render the site. Minification is performed on the web server before a response is sent ...

Why do we need to minify JavaScript?

Minification is the process of minimizing code and markup in your web pages and script files. It's one of the main methods used to reduce load times and bandwidth usage on websites. Minification dramatically improves site speed and accessibility, directly translating into a better user experience.


2 Answers

YUI compression maven plugin worked for me. I will show what all I did to make it work.

  • To concatenate all the js files I used aggregation.

Details of the elements used.

  • preProcessAggregates - To process aggregation before minification.
  • aggregations - To aggregate the multiple resources in folder hierarchy to a single file.
  • aggregation - There can be multiple aggregation elements inside parent aggregations.
  • insertNewLine - Insert newline after each file eof, while concatenation/aggregation of files.
  • inputDir - Parent directory inside which files would be searched for concatenation/aggregation.
  • sourceDirectory - Directory under which files would be searched for minification.
  • outputDirectory - Directory under which minified output would be placed.
  • nosuffix - If set to true, then plugin will not add '-min' to the minified file.

There are 2 types of <exclude> property:-

  • First is part of aggregation, which basically excludes files from aggregation.
  • Second is part of the plugin to exclude files from minification.

Plugin code:-

<plugin>
  <groupId>net.alchim31.maven</groupId>
  <artifactId>yuicompressor-maven-plugin</artifactId>
  <version>1.3.2</version>
  <configuration>
    <preProcessAggregates>true</preProcessAggregates>
    <aggregations>
      <aggregation>
        <insertNewLine>true</insertNewLine>
        <output>${basedir}/target/single.js</output>
        <inputDir>${basedir}/src/main/resources/js</inputDir>
        <includes>
          <include>**/*.js</include>
        </includes>
        <excludes>
          <exclude>**/*abc.js</exclude>
          <exclude>**/compressed.css</exclude>
        </excludes>
      </aggregation>
    </aggregations>
    <excludes>
      <exclude>**/*-min.js</exclude>
      <exclude>**/*.min.js</exclude>
      <exclude>**/*-min.css</exclude>
      <exclude>**/*.min.css</exclude>
    </excludes>
    <jswarn>false</jswarn>
    <nosuffix>false</nosuffix>
    <sourceDirectory>${basedir}/target</sourceDirectory>
    <outputDirectory>${basedir}/target</outputDirectory>
  </configuration>
  <executions>
    <execution>
      <id>compress_js_css</id>
      <phase>process-resources</phase>
      <goals>
        <goal>compress</goal>
      </goals>
    </execution>
  </executions>
</plugin>
like image 186
Mady Avatar answered Sep 20 '22 10:09

Mady


You should take a look to yui compression maven plugin which sounds like the thing you need.

like image 15
khmarbaise Avatar answered Sep 22 '22 10:09

khmarbaise