使用YUI+Ant 实现JS CSS压缩

今天研究了一下YUI yahoo开源框架,感觉很猛啊。

于是乎我做了一个YUI的ant实现,网上好多关于bat的实现,我就另辟蹊径,出个关于这个的ant实现,嘿嘿独一无二的文章,如果转载的话,其注明作者和网站

copyright:Mr.chen

好了具体操作如下:

官网:

yuicompressor-2.4.6.jar 下载地址 http://yuilibrary.com/downloads/#yuicompressor

YUIAnt.jar 下载地址 http://www.ubik-ingenierie.com/miscellanous/YUIAnt/

具体的相关代码如下:

#css work dir
commonCss.dir = css 

#js work dir
commonJs.dir = js 

#build temp dir
output.temp.dir = build 

#output files in the directory
output.dir = ${output.temp.dir}_output 

#environment needs lib
liblib = lib 

<?xml version="1.0" encoding="UTF-8"?> 

<project name="Compress CSS-JS" default="compress" basedir="."> 

  <property file="bulid.properties" /> 

  <path id="yuiClasspath">
    <fileset dir="${lib}">
      <include name="*.*" />
    </fileset>
  </path> 

  <!-- #######################Init the environment of the tool ##########################-->
  <target name="init">
    <echo message="begin to init the init" />
    <echo message="delete all reference files." />
    <delete dir="${output.dir}" />
    <echo message="delete end" />
    <echo message="make the reference files." />
    <mkdir dir="${output.dir}" />
    <mkdir dir="${output.temp.dir}" />
    <echo message="make end." />
  </target> 

  <!-- #######################Combine the css files       ##########################-->
  <target name="combinecss" depends="init" description="Combine common css files">
    <echo message="begin to combine the css files to one file." />
    <concat destfile="${output.temp.dir}/combined_css.css" encoding="UTF-8" append="false">
      <fileset dir="${commonCss.dir}">
        <include name="*.css" />
      </fileset>
    </concat>
    <echo message="combine end." />
  </target> 

  <!-- #######################Combine the js files       ##########################-->
  <target name="combinejs">
    <echo message="begin to combine the js files to one file." />
    <concat destfile="${output.temp.dir}/all_source.js" encoding="utf-8" append="false">
      <fileset dir="${commonJs.dir}">
        <include name="*.js" />
      </fileset>
    </concat>
    <echo message="combine end." />
  </target> 

  <!-- #######################Compress the js and css files ##########################-->
  <target name="compress" depends="combinecss,combinejs" description="Compress">
    <echo message="begin to compress the css file." />
    <taskdef name="yuicompress" classname="com.yahoo.platform.yui.compressor.YUICompressTask">
      <classpath>
        <path refid="yuiClasspath" />
      </classpath>
    </taskdef>
    <!-- first method compress the css files -->
    <yuicompress linebreak="10000000" warn="false" munge="yes" preserveallsemicolons="true" outputfolder="${output.dir}">
      <fileset dir="${output.temp.dir}">
        <include name="*.css" />
      </fileset>
    </yuicompress>
    <echo message ="compress the css end." />
    <!-- second method compress the js files-->
    <echo message ="begin to compress the js file." />
    <apply executable="java" parallel="false" failonerror="true">
      <fileset dir="${output.temp.dir}" includes="all_source.js" />
      <arg line="-jar" />
      <arg path="${lib}/yuicompressor-2.4.6.jar" />
      <arg line="--charset utf-8" />
      <arg line="-o ${output.dir}/combined_js.js" />
      <srcfile />
    </apply>
    <echo message ="compress the js end." />
    <delete dir="${output.temp.dir}" />
  </target> 

</project> 

@echo off
echo ################################################
echo ##########Tool Compress the js and css##########
echo ################################################
echo Please make sure your css and js in the css'directory and js'directory.
echo If sure,please enter any button to continue the tool.
pause
call ant -buildfile compress.xml compress>build.log
echo compress end
pause 

相关的文件我提供下载,感觉好的,就留言吧

(0)

相关推荐

  • Java操作Ant压缩和解压文件及批量打包Anroid应用

    实现zip/tar的压缩与解压 java中实际是提供了对  zip等压缩格式的支持,但是为什么这里会用到ant呢? 原因主要有两个: 1. java提供的类对于包括有中文字符的路径,文件名支持不够好,你用其它第三方软件解压的时候就会存在乱码.而ant.jar就支持文件名或者路径包括中文字符. 2. ant.jar提供了强大的工具类,更加方便于我们对压缩与解压的操作. 注意事项: 1. 首先说明一下,关于皮肤或者类似于皮肤的Zip包,实际上公司可能会根据自己的规定或需求,自定义压缩包文件的结尾,实

  • apache ant进行zip解压缩操作示例分享

    需要导入ant.jar包,apache网站(http://ant.apache.org/bindownload.cgi)下载即可. 复制代码 代码如下: import java.io.BufferedInputStream;import java.io.BufferedOutputStream;import java.io.File;import java.io.FileInputStream;import java.io.FileOutputStream;import java.io.IOEx

  • Android笔记之:App自动化之使用Ant编译项目多渠道打包的使用详解

    随着工程越来越复杂,项目越来越多,以及平台的迁移(我最近就迁了2回),还有各大市场的发布,自动化编译android项目的需求越来越强烈,后面如果考虑做持续集成的话,会更加强烈.    经过不断的尝试,在ubuntu环境下,以花界为例,我将一步一步演示如何使用命令行,使用ant编译android项目,打包多渠道APK.    要点:    (1). 编译android的命令使用    (2). ant基本应用    (3). 多项目如何编译(包含android library)    (4). 如

  • ANT 压缩(去掉空格/注释)JS文件可提高js运行速度

    1.说明在使用extjs 的时候,运行起来比较卡,特别是运行数据和js过多的时候,就会出现卡死的情况,或者等待时间比较长. 在解决这个有很多优化方法,今天来说其中一种,那就是在Ant脚本打包的时候,把js中空格.注释去掉.以及合并,合并今天不说了,还未实现这个,在研究中 2.首先,需要准备二个 .jar 文件,分别是 YUIAnt.jar 和 yuicompressor-2.4.x.jar . 3.俩个文件的附件 下载地址 4.build.xml文件如下 复制代码 代码如下: <!-- JS压缩

  • 使用ANT与YUI压缩js的实现方法

    由于项目使用的js很多,为了提高系统效率,将js做压缩处理.成功的对多个js进行压缩,必须经历下面两步.1.合并多个js成为一个js.2.将和并过后的js进行压缩处理.使用的ant配置主要有: 复制代码 代码如下: <property  name="root" value="WebRoot"></property> <property  name="js" value="${root}/js"&g

  • 使用YUI+Ant 实现JS CSS压缩

    今天研究了一下YUI yahoo开源框架,感觉很猛啊. 于是乎我做了一个YUI的ant实现,网上好多关于bat的实现,我就另辟蹊径,出个关于这个的ant实现,嘿嘿独一无二的文章,如果转载的话,其注明作者和网站 copyright:Mr.chen 好了具体操作如下: 官网: yuicompressor-2.4.6.jar 下载地址 http://yuilibrary.com/downloads/#yuicompressor YUIAnt.jar 下载地址 http://www.ubik-ingen

  • css js 图片压缩批处理命令(基于YUI Compressor)

    复制代码 代码如下: @echo off ::设置YUI Compressor启动目录 SET YUIFOLDER=D:\yuicompressor-2.4.2\build\ ::设置你的JS和CSS根目录,脚本会自动按树层次查找和压缩所有的JS和CSS SET INFOLDER=D:\jscss\src SET OUTFOLDER=D:\jscss\build echo 正在查找 JavaScript, CSS ... chdir /d %INFOLDER% for /r . %%a in (

  • Yii2中使用asset压缩js,css文件的方法

    官网文档 http://www.yiiframework.com/doc-2.0/guide-structure-assets.html yii目录下运行 asset/template assets.php 生成assets.php,这是一个配置模板,并修改如下 <?php /** * Configuration file for the "yii asset" console command. */ // In the console environment, some pat

  • php压缩HTML函数轻松实现压缩html/js/Css及注意事项

    压缩HTML的起因 如何提高网页加载速度 ,需要怎么对html页面优化相信是每个拟提高建站技术站长曾想到的问题,其实网页优化的方法还是很多. 有童鞋询问higrid如何 压缩HTML,也就是说能不能 把所有的html.js.Css在运行前都压缩成一行,清除注释标记.换行符.空格.制表符等.这样一个直接的好处是 减小html页面体积来提高前端加载速度.很多人认为启动gzip,但一般启动gzip都比较少对html启动gzip压缩,因为现在的html都是动态的,不会使用浏览器缓存,而启用gzip的话每

  • require.js 加载 vue组件 r.js 合并压缩的实例

    准备: vue.js 原本是学习vue组件 require.js 然后想到用require 加载 r.js 文件太多 合并 文件目录 忽略部分文件及文件夹 一.先说vue 组件 先引入vue 再引入vue组件 Vue.extend({}) 定义组件 template data methods Vue.component(),注册组件的标签,标签在html中是一个挂载点 new Vue() 进行实例化 index.html // css引入 略 <div id="header"&g

  • JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)

    本文实例讲述了JS+CSS实现鼠标经过弹出一个DIV框效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

  • Sublime Text 3插件Minify的安装与使用(js代码压缩)

    目录 需要用到的软件 进入正题Minify的安装 Minify文档翻译 需要用到的软件 SublimeText3+Node.js 进入正题Minify的安装 打开SublimeText,快捷键ctrl+shift+p调出package control输入install package找到minify回车安装即可,安装结成功后该文档在编辑器中弹出. # 注意(uglify-js默认只支持es5,如果要支持es6需要当前安装) uglify-js@3已支持es6压缩 # 未安装过minify所需组件

  • js+css实现有立体感的按钮式文字竖排菜单效果

    本文实例讲述了js+css实现有立体感的按钮式文字竖排菜单效果.分享给大家供大家参考.具体如下: 这是一款较不错的竖排菜单,有立体感效果的菜单,不要以为那些带立体特效的菜单是按钮啊,其实它就是用JavaScript代码修饰出来的按钮,鼠标放上的时候就会有明显的立体文字效果,竖向排列的,也可以修改成横向的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-3d-nutton-v-menu-codes/ 具体代码如下: <!DOCTYP

  • js+css简单实现网页换肤效果

    本文实例讲述了js+css简单实现网页换肤效果.分享给大家供大家参考,具体如下: 这里做了3套外观,分别使用不同文件夹下的同名css文件,那么怎样实现js替换加载呢? 3个按钮如下: <a id="skin1" href="javascript:void(0)" class="easyui-linkbutton" onclick="changeCss('default')">蓝色皮肤</a><br

  • JS+CSS实现的拖动分页效果实例

    本文实例讲述了JS+CSS实现拖动分页效果的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>拖动分页</title> <meta http-equiv=Content-Type content="text/html; charset=utf-8"> <style> body{ border:0px; margin:0px; overflow:hidden; backgrou

随机推荐