2. 程式人生 > >使用yuicompressor-maven-plugin合併壓縮js和css

使用yuicompressor-maven-plugin合併壓縮js和css

阿新 • • 發佈：2019-01-21

1.宣告 plugin.版本號這個可以不宣告,不宣告的時候用最新的, <executions>這個節點還會報錯，但是可以忽略，不影響build war包

<groupId>net.alchim31.maven</groupId>
<artifactId>yuicompressor-maven-plugin</artifactId>
<version>1.4.0</version>
<executions>
<execution>
<goals>
<goal>compress</goal>
</goals>
</execution>
</executions>

2 定義編譯事務。removeIncluded 是否要刪除原有的檔案，是否插入新行insertNewLine。編譯檔案路徑inputDir，這個一定不要寫錯路徑，不然無法編譯。

編譯輸入檔案 output ，定義合併壓縮後的檔案。 要編譯的檔案includes/include，如果js有依賴，一定要按照依賴關係先後放入佇列。還有一個exclude標示布匹的，就是不編譯的，一般是和include使用匹配符號來使用，如;<include>**/*.js</include> 匹配所有編譯目錄的js和子目錄的js檔案,<include>**/*-min.js</include>不編譯-min字尾的檔案。

如果輸出檔案未定義，會加上預設的-min字尾生成一個的壓縮檔案。

<aggregation>
<removeIncluded>true</removeIncluded>
<insertNewLine>true</insertNewLine>
<inputDir>${project.build.directory}/${project.build.finalName}/resources/static/js/xiu</inputDir>
<output>${project.build.directory}/${project.build.finalName}/build/js/publicHeadJs.min.js</output>
<includes>
<include>jquery-1.7.2.js</include>
<include>jquery.lazyload.js</include>
<include>jqueryCookie.js</include>
<include>autocomplete.js</include>
<include>json.js</include>
<include>common.setting.js</include>
<include>public.login.js</include>
<include>click_xiu.js</include>
<include>util.xiu.js</include>
<include>click_xiu_pass_sid.js</include>
<include>util.js</include>
</includes>
</aggregation>

3.定義多個壓縮檔案<aggregation>...</aggregation><aggregation>...</aggregation>

<aggregation>
<removeIncluded>true</removeIncluded>
<insertNewLine>true</insertNewLine>
<inputDir>${project.build.directory}/${project.build.finalName}/resources/static/js/xiu</inputDir>
<output>${project.build.directory}/${project.build.finalName}/build/js/publicHeadJs.min.js</output>
<includes>
<include>jquery-1.7.2.js</include>
<include>jquery.lazyload.js</include>
<include>jqueryCookie.js</include>
<include>autocomplete.js</include>
<include>json.js</include>
<include>common.setting.js</include>
<include>public.login.js</include>
<include>click_xiu.js</include>
<include>util.xiu.js</include>
<include>click_xiu_pass_sid.js</include>
<include>util.js</include>
</includes>
</aggregation>
<aggregation>
<insertNewLine>true</insertNewLine>
<inputDir>${project.build.directory}/${project.build.finalName}/resources/static/js/xiu</inputDir>  
<output>${project.build.directory}/${project.build.finalName}/build/js/publicHeadApp.min.js</output>
<includes>
<include>public.head.app.js</include>
</includes>
</aggregation>
<aggregation>
<insertNewLine>true</insertNewLine>
<inputDir>${project.build.directory}/${project.build.finalName}/resources/static/css/default</inputDir>  
<output>${project.build.directory}/${project.build.finalName}/build/css/publicHead.min.css</output>
<includes>
<include>hugoboss.css</include>
<include>product.css</include>
<include>promotions.css</include>
<include>publicHead.css</include>
</includes>
</aggregation>

最終檔案

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.rain</groupId>
	<artifactId>testweb_mvn</artifactId>
	<packaging>war</packaging>
	<version>0.0.1-SNAPSHOT</version>
	<name>testweb_mvn Maven Webapp</name>
	<url>http://maven.apache.org</url>

	<properties>
		<java.version>1.6</java.version>
		<maven.compiler.version>2.3.2</maven.compiler.version>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
	</properties>

	<dependencies>
		<dependency>
			<groupId>junit</groupId>
			<artifactId>junit</artifactId>
			<version>3.8.1</version>
			<scope>test</scope>
		</dependency>
	</dependencies>

	<pluginRepositories>
		<pluginRepository>
			<name>oss.sonatype.org</name>
			<id>oss.sonatype.org</id>
			<url>http://oss.sonatype.org/content/groups/public</url>
		</pluginRepository>
	</pluginRepositories>

	<build>
		<finalName>testweb_mvn</finalName>
		<plugins>
			<plugin>
				<groupId>net.alchim31.maven</groupId>
				<artifactId>yuicompressor-maven-plugin</artifactId>
				<version>1.4.0</version>
				<executions>
					<execution>
						<goals>
							<goal>compress</goal>
						</goals>
					</execution>
				</executions>
				<configuration>
					<jswarn>false</jswarn>
					<nosuffix>true</nosuffix>
					<aggregations>
						<aggregation>
							<removeIncluded>true</removeIncluded>
							<insertNewLine>true</insertNewLine>
							<inputDir>${project.build.directory}/${project.build.finalName}/resources/static/js/xiu</inputDir>
							<output>${project.build.directory}/${project.build.finalName}/build/js/publicHeadJs.min.js</output>
							<includes>
								<include>jquery-1.7.2.js</include>
								<include>jquery.lazyload.js</include>
								<include>jqueryCookie.js</include>
								<include>autocomplete.js</include>
								<include>json.js</include>
								<include>common.setting.js</include>
								<include>public.login.js</include>
								<include>click_xiu.js</include>
								<include>util.xiu.js</include>
								<include>click_xiu_pass_sid.js</include>
								<include>util.js</include>
							</includes>
						</aggregation>
						<aggregation>
							<insertNewLine>true</insertNewLine>
							<inputDir>${project.build.directory}/${project.build.finalName}/resources/static/js/xiu</inputDir>  
							<output>${project.build.directory}/${project.build.finalName}/build/js/publicHeadApp.min.js</output>
							<includes>
								<include>public.head.app.js</include>
							</includes>
						</aggregation>
						<aggregation>
							<insertNewLine>true</insertNewLine>
							<inputDir>${project.build.directory}/${project.build.finalName}/resources/static/css/default</inputDir>  
							<output>${project.build.directory}/${project.build.finalName}/build/css/publicHead.min.css</output>
							<includes>
								<include>hugoboss.css</include>
								<include>product.css</include>
								<include>promotions.css</include>
								<include>publicHead.css</include>
							</includes>
						</aggregation>
					</aggregations>
				</configuration>
			</plugin>
			
		</plugins>
	</build>

</project>

我這個列子只是介紹如何編譯出多個檔案，對非RIA專案適用，如果RIA專案一定要多用匹配符

相關推薦

使用yuicompressor-maven-plugin合併壓縮js和css

1.宣告 plugin.版本號這個可以不宣告,不宣告的時候用最新的, <executions>這個節點還會報錯，但是可以忽略，不影響build war包 <groupId>net.alchim31.maven</groupId><a

Maven使用yuicompressor-maven-plugin打包壓縮css、js檔案

最近專案想使用在maven打包的時間壓縮js,css檔案，採用yuicompressor-maven-plugin外掛進行壓縮，但只是壓縮減小大小，提高請求速度，並沒有對js進行混淆。下面就寫一下這個外掛的使用。 假設專案包含如下結構 需要把專案中設計的css和js全部壓

YUIcompressor批處理壓縮js和css

@echo off rem 正在壓縮... echo 正在壓縮Css檔案 for /f "delims=" %%i in ('dir /b /a-d /s "*.css"') do call java -jar C:\Work_area\tool\yuicomp

grunt 合並壓縮js和css文件（二）

1.0 ajax depend cnp com .html post tle runt 具體node及文件配置請看： grunt 安裝使用（一） 要壓縮的文件 --src/ ajax.js assets.js touch.js zepto.js

webpack學習（六）打包壓縮js和css

網頁 com 換行符 最小化 合並 標準 註意 resolve hash 打包壓縮js與css 由於webpack本身集成了UglifyJS插件（webpack.optimize.UglifyJsPlugin）來完成對JS與CSS的壓縮混淆，無需引用額外的插件, 其命令we

在MVC中使用Bundle打包壓縮js和css

inf pts sax uget body info strong 頁面 target 第一步：安裝 安裝“System.Web.Optimization”：在中“NuGet”中搜索 安裝。 第二步：配置 配置“Views”目錄下的“web.config”文件增

gulp配置自動重新整理瀏覽器壓縮js和css檔案和圖片

1.在專案目錄下新建gulpfile.js檔案,配置如下內容 var gulp = require("gulp"); var cssnano = require("gulp-cssnano"); var rename = require("gulp-rename"); var uglify =

uglifyjs 合併壓縮 js, clean-css 合併壓縮css

本文主要介紹如何通過CLI命令列（也就是終端或者cmd開啟的那個shell視窗）實現 js和 css 的合併壓縮。 uglifyjs 合併壓縮 js: 1.安裝node 這一步就不多說了，下載node自行安裝。   2.安裝 uglifyj

新手教學 gulp 合併壓縮js、css檔案

文章目錄 打包壓縮js、css檔案 如何執行 打包壓縮js、css檔案 先上程式碼，如下所示 // 獲取 gulp var gulp = require('gulp'); // 獲取 uglify 模組（用於壓縮 JS） var ug

grunt壓縮js和css檔案(1)

接下來是個人的理解： 壓縮js 1、node安裝，node會自動安裝npm。 安裝完之後檢視版本：node -v 和 npm -v 2、新建專案後package.json 安裝。 命令：npm init（直接一直回車，輸入yes之後回車

gulp壓縮js和css檔案

gulp的簡介這裡就不贅述了，最新對js和css壓縮有用webpack的，但是研究了一下，好麻煩，最終轉向gulp。 下面開始正式的壓縮步驟： 總體概略是： 安裝nodejs -> 全域性安裝g

在ASP.NET MVC中，使用Bundle來打包壓縮js和css

在ASP.NET MVC4中（在WebForm中應該也有），有一個叫做Bundle的東西，它用來將js和css進行壓縮（多個檔案可以打包成一個檔案），並且可以區分除錯和非除錯，在除錯時不進行壓縮，以原始方式顯示出來，以方便查詢問題。 這裡僅簡單記錄下如何使用。 首先

win7下，Ant 配合yuicompressor對js和css進行合併、壓縮、拷貝處理

更新：2015/8/13 【NAnt】 NAnt is a .NET-based build tool. In theory it is kind of like make without make's wrinkles. In practice it's a lot

使用yuicompressor-maven-plugin壓縮js及css檔案

本文介紹通過使用yuicompressor-maven-plugin外掛實現js及css程式碼的自動壓縮，方便整合到持續整合環境中，如jenkins。 一、配置yuicompressor-maven-plugin 在pom檔案中增加該外掛的定義，示例如下： <

第十一節：Bundles壓縮合並js和css及原理分析

string數組 tab 速度 操作 spn sof 參考 reader 調試 一. 簡介 1.背景：瀏覽器默認一次性請求的網絡數是有上限的,如果你得js和css文件太多，就會導致瀏覽器需要多次加載，影響頁面的加載速度, MVC中提供Bundles的方式壓縮合並js和cs

效能優化之YUICompressor壓縮JS、CSS

效能一直是專案中比較重要的一點，尤其入口網站，對頁面的響應要求是很高的，從效能角度上來講，對於Web端的優化其中重要的一點無疑是JS、CSS檔案壓縮，圖片的融合，儘量減小檔案的大小，必免佔加載時佔用過多的頻寬。yuicompressor無疑是一個比較好的壓縮工具

使用useref合併html中零散的js和css檔案

安裝： $ npm install gulp-useref --save-dev 使用： var gulp = require('gulp'); var useref = require(‘g

常用的一些js和css

turn on() chan isp pac ... .com || com /*給一組li裏面寫入12345.....*/ $("li").html(function(idx){ 　　return idx+1; }) css限制文字字數: white-space: no

js和css

vps con jce amp pre text function 可見 content body{height:100%;background-image:url(./img/background.png);} body的寬度碎屏幕大小課設置成 height:100%;

愛創課堂分享“15 個有趣的 JS 和 CSS 庫”，

前端 web劃重點 迎來了黃金10 月，在這收獲的季節，我又為你們帶來了哪些新鮮、有趣的前端資源呢？前端開發者們，一起來看看有木有你需要的前端庫。1.DisplayJSDisplayJS 是一個幫助你渲染 DOM 的簡易框架。使用它，你可以更容易地將 JS 變量遍歷到特定的 HTML 元素中，類似