文档章节

Intellij IDEA下使用Ant构建工具压缩合并js和css

EDIAGD
 EDIAGD
发布于 2013/08/19 23:53
字数 874
阅读 5333
收藏 7

做移动端项目的时候,页面优化的时候存在一个问题,引入的多个css和js会发出多个http请求,对页面的响应速度影响很大,所有想到用yahoo的一个js/css压缩工具YUI Compressor 

这里用的最新版本2.4.7.

在我的idea的工程目录的webapp目录下,我建立:

一:建立了build目录,放置ant脚本build.xml文件 和 build.properties配置文件

还建立了一个lib文件夹放置bulid的引入jar包

由于在实际项目中,我们需要对不同的目录的资源文件压缩,因此一般通过循环完成多个目录的压缩。在本配置文件中,使用了额外的一个ant任务扩展包ant-contrib,自行下载。 该包在ant的基础上扩展了多个自定义任务。

1;ant脚本build.xml文件代码如下:

 

<?xml version="1.0" encoding="UTF-8"?>
<project name="yui-compressor-demo" basedir="." default="yui-compress">
    <description>
        yui-compressor-demo
    </description>

    <!--导入配置文件 -->
    <property file="build.properties"/>
    <tstamp>
        <format property="build.time" pattern="yyyy-MM-dd-HH-mm"/>
    </tstamp>

    <!--设置ant-contrib.jar用于逻辑判断 -->
    <taskdef resource="net/sf/antcontrib/antlib.xml">
        <classpath>
            <pathelement location="${lib.build.antcontrib}"/>
        </classpath>
    </taskdef>

    <!--设置编译环境 -->
    <path id="build.classpath">
        <fileset dir="${lib.build}">
            <include name="*.jar"/>
        </fileset>
    </path>

    <!-- 创建build相关目录 -->
    <target name="init">
        <delete dir="${deploy.dir}"/>
        <mkdir dir="${deploy.resource}"/>
    </target>

    <!--压缩合并css、js文件 -->
    <target name="yui-compress" depends="init">
        <!-- 由于需要对css和js压缩,因此使用antcontrib ant扩展来做循环判断 -->
        <for list="${resources.include}" param="resoucesPath">
            <!-- param表示在迭代的变量,使用时为@{resourcesPath} -->
            <sequential>
                <!--创建资源目录 -->
                <mkdir dir="${deploy.resource}/@{resoucesPath}/"/>
                <!--合并小文件为一个资源文件 -->
                <concat
                        destfile="${deploy.resource}/@{resoucesPath}/merge-src.@{resoucesPath}"
                        fixlastline="true" encoding="UTF-8">
                    <fileset dir="${resource.dir}/@{resoucesPath}">
                        <exclude name="merge.@{resoucesPath}"/>
                    </fileset>
                </concat>
                <!--压缩资源文件 -->
                <apply executable="java" parallel="false" failonerror="true">
                    <fileset dir="${deploy.resource}/@{resoucesPath}">
                        <include name="*.@{resoucesPath}"/>
                    </fileset>
                    <arg line="-jar"/>
                    <arg path="${lib.build.yuicompressor}"/>
                    <arg line="--charset UTF-8"/>
                    <srcfile/>
                    <arg line="-o"/>
                    <mapper type="glob" from="*.@{resoucesPath}"
                            to="${deploy.resource}/@{resoucesPath}/merge-min.@{resoucesPath}"/>
                    <targetfile/>
                </apply>
            </sequential>
        </for>
    </target>
</project>

build.properties配置文件代码如下:

 

##工程根目录
project.dir=..

##app目录
resource.dir=${project.dir}/
resources.include=css,js

##依赖包
lib.dir = ${project.dir}/lib
lib.build=${lib.dir}/build
lib.build.yuicompressor= ${lib.dir}/build/yuicompressor-2.4.7.jar
lib.build.antcontrib= ${lib.dir}/build/ant-contrib-1.0b3.jar

#发布目录
deploy.dir=${project.dir}/deploy
deploy.resource=${deploy.dir}/resources

2:接着:

Ant Build面板中点击+号,可以引入一个build.xml配置文件,你可以引入多个,点击-号可以删除选中的配置文件。引入配置文件之后,选中需要运行的任务,可以是Project,也可以是Target,再点击上面的播放按钮就可以Run了

3:运行之后的结果:

这个过程就把我原来项目下webapp目录下的js和css文件夹下的多个js和多个css都压缩合并到

新建的一个deploy目录下了,这里看到,合并的merge-src.css和merge-src.js为源文件

压缩合并的merge-min.css和merge-src.js就是我要的。这样就可以把这两个文件部署上去用了,简洁多了。

这里我意识到Ant的强大:

 

ant能帮前端干些什么呢?

  • 合并js/css文件;
  • 调用YUI Compressor自动压缩css文件,调用Google Closure Compiler自动压缩js;
  • 快速批量复制/删除指定文件;
  • 调用jsDoc工具,自动生成js文档;
  • 连接FTP,将代码快速发布到指定服务器;
  • 将文件自动上传到svn上;
  • 自动打包成zip文件
  • ...

后续有很多开发填坑的文章发布,如果对你有帮助,请支持和加关注一下

http://e22a.com/h.05ApkG?cv=AAKHZXVo&sm=339944

https://shop119727980.taobao.com/?spm=0.0.0.0 

© 著作权归作者所有

EDIAGD
粉丝 50
博文 149
码字总数 58327
作品 0
嘉定
后端工程师
私信 提问
使用Ant构建SSH项目(Intellij IDEA版)

学习Ant用的,Intellij IDEA中集成了Ant工具,挺方便的。我这个就是使用Idea集成的Ant构建一个简单的SSH项目的示例吧,欢迎指正和评论,里面有几个问题点,我也会给大家看一看。 一.项目目录...

qqli
2012/11/19
3K
0
5款工具助你写出更好的Java代码

摘要:工欲善其事,必先利其器。一名优秀的开发者手里肯定握着不少秘密武器,本文开发者分享了他在开发Java项目时,所用到的5款有助于提高代码质量的工具。 在本文,将介绍5款在IDR解决方案的...

断桥是否下过雪
2014/02/21
405
0
gulp实现监听改变自动刷新页面

gulp的安装和一些基本api我之前已经有文章介绍了,刚好最好在研究将gulp+webpack结合起来,重新回顾了下gulp的一些操作,觉得值得分享 gulp-htmlmin gulp-rev-append gulp-connect gulp-wat...

飞翔的熊blabla
04/08
0
0
使用Kissy Pie快速构建—kissy1.2最佳实践探索

kissy1.2模块文件打包问题 来看个第一次使用kissy1.2来构建项目时,需要进行的步骤: 从上图来看,构建的成本主要在构建的环境搭建和build.xml上。 从环境上,需要安装ant以及知道ant的基本使...

青铜骑士
2013/12/25
310
0
让您的 web 应用程序飞起来

本文向您介绍如何通过在您的 CSS 和 JavaScript 文件中 — 两种易于优化的常见资源,使用社区中提供的工具即可完成优化 — 优化空间使用来实现更高的性能。然而,在继续之前,有一点是很重要...

IBMdW
2011/09/21
2.7K
2

没有更多内容

加载失败,请刷新页面

加载更多

JAVA数据结构与算法(二)

栈 1) 栈的英文为 (stack) 2) 栈是一 个 先入后出 (FILO-First In Last Out) 的有序列表 。 3) 栈 (stack) 是限制线性表中元素的插入和删除 只能在线性表的同一端 进行的一种特殊线性表。允许...

aaa阿伟呀
16分钟前
2
0
聊聊nacos的ServiceReporter

序 本文主要研究一下nacos的ServiceReporter ServiceManager.init nacos-1.1.3/naming/src/main/java/com/alibaba/nacos/naming/core/ServiceManager.java @Component@DependsOn("nacosAppl......

go4it
21分钟前
2
0
文字太长想隐藏的字用省略号来代替

white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 是必须的,因为宽度需要固定它才知道那些文字是超出了范围 你会觉得这样的话那怎么看全部的文字呢?你可以在元素上...

前端老手
27分钟前
3
0
二叉树交换左右子树

树的实现类 public class TreeNode {public int val;public TreeNode left;public TreeNode right;public TreeNode(int x) {val = x;}public TreeNode(int val, TreeN......

jxlgzwh
42分钟前
11
0
在Workstation 15上测试vShere 6.7+vCenter Server

想学习vSphere,最好能在自己的电脑上搭建相应的学习环境,如下图所示: _________________________________ | ...

大别阿郎
45分钟前
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部