Maven：你如何更新html文件以使用新的縮小和連接的JS＆CSS文件？

Question

我有很多的CSS & JS文件在我的HTML，我使用YUI壓縮器將所有這些變成&縮減爲1x CSS和1x JS。

有沒有辦法讓maven進入我的HTML文件，刪除20+行&包括用被縮小的行代替？

Answer 1

一個不錯的選擇是使用Grunt替換html文件中的引用。有一個Grunt插件來做到這一點：grunt-usemin。

例如：

<!-- build:js js/app.minjs --> 
<script src="js/controllers/thing-controller.js"></script> 
<script src="js/models/thing-model.js"></script> 
<script src="js/views/thing-view.js"></script> 
<!-- endbuild --> 

輸出文件：

<script src="js/app.min.js"></script> 

Answer 2

可以使用縮小，Maven的插件再壓縮在構建時文件。

 <plugin> 
      <groupId>com.samaxes.maven</groupId> 
      <artifactId>minify-maven-plugin</artifactId> 
      <version>1.6.2</version> 

      <!--The given minified Executions are used in all web-apps --> 

      <executions> 

      <execution> 
       <id>js-minify</id> 
       <phase>compile</phase> 
       <configuration> 
       <charset>UTF-8</charset> 
       <nosuffix>true</nosuffix> 
       <jsSourceDir>static/js</jsSourceDir> 
       <jsSourceFiles> 
        <jsSourceFile>template.scroll.js</jsSourceFile> 
        <jsSourceFile>template.input.js</jsSourceFile> 
        <jsSourceFile>template.modal.js</jsSourceFile> 
        <jsSourceFile>template.table.js</jsSourceFile> 
       </jsSourceFiles> 
       <jsTargetDir>static/js</jsTargetDir> 
       <jsFinalFile>template-common-minified.js</jsFinalFile> 
       <jsEngine>CLOSURE</jsEngine> 
       </configuration> 
       <goals> 
       <goal>minify</goal> 
       </goals> 
      </execution> 

      <execution> 
       <id>template-js-minify</id> 
       <phase>compile</phase> 
       <configuration> 
       <charset>UTF-8</charset> 
       <nosuffix>true</nosuffix> 
       <jsSourceDir>static/js</jsSourceDir> 
       <jsSourceFiles> 
        <jsSourceFile>template.tabs.js</jsSourceFile> 
        <jsSourceFile>template.tooltip.js</jsSourceFile> 
        <jsSourceFile>template.message.js</jsSourceFile> 
       </jsSourceFiles> 
       <jsTargetDir>static/js</jsTargetDir> 
       <jsFinalFile>template-metooltab-minified.js</jsFinalFile> 
       <jsEngine>CLOSURE</jsEngine> 
       </configuration> 
       <goals> 
       <goal>minify</goal> 
       </goals> 
      </execution> 

      </executions> 
     </plugin> 

上述兩個執行縮小了JS文件。您也可以使用CSS文件。 在你的HTML中使用這個JS文件作爲

<script src="template-metooltab-minified.js"></script> <script src="template-common-minified.js"></script>

最新問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 相關問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.