使用 ant 简洁构建前端 - { focus : web } - ITeye技术网站

注意两个可修改编码或字符集的地方：

压缩

对应于编译型语言构建的编译阶段，压缩优化源码，推荐 css采用 yuicompressor ，JavaScript采用 google closure-compiler 。ant 可以通过 java 任务来方便地调用外部 java 程序，并且在同一 jvm 内运行也避免了通过 exec 执行外部程序的效率问题。不过由于压缩器每次只能针对单个源文件进行操作，这时就需要使用 ant 的批处理任务（bulk task）：apply

Xml代码  
<apply executable="java"  
               dest="目的地"  
               failonerror="true"  
               parallel="并行执行"  
                >  
            <fileset dir="css源地址"  
                     includes="**/*.css"/>  
            <arg line="-jar"/>  
            <arg path="yuicompressor.jar"/>  
            <arg line="--charset ${charset}"/>  
            <srcfile/>  
      
            <arg line="-o"/>  
            <targetfile/>  
            <mapper type="regexp" from="^(.*)\.(css|js)$" to="\1-min.\2"/>  
        </apply>  

打包

对于前端代码，打包的意义在于减少http链接数，主要用到的 ant 任务：concat ，将多个文件合并为一个文件

Xml代码  
<concat destfile="目的文件"  
                encoding="读取编码"  
                outputencoding="写入编码">  
    <filelist .../>  
</concat>  

同 copy 类似，若要求合并后的文件内容顺序，则使用filelist，否则使用fileset即可。

阅读全文……

标签 : javascript, web前端

发表评论

IT瘾于2013年9月30日上午08时49分00秒发布 #

制作Web地图的几种方法

JavaScript-based：jVectorMap

jVectorMap uses only native browser technologies like JavaScript, CSS, HTML, SVG or VML. No Flash or any other proprietary browser plug-in is required. This allows jVectorMap to work in all modern mobile browsers.

参考：http://dove19900520.iteye.com/blog/1880668

D3.js

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

纯SVG

raphaeljs

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.

Raphaël ['ræfeɪəl] uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.

Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.

GeoMap：https://github.com/x6doooo/GeoMap

http://www.helloweba.com/view-blog-242.html

http://www.cnblogs.com/linfei721/archive/2013/06/02/3114174.html

http://rockydo.com/svgmap/svgmap.html

Fabric.js

Fabric.js is a powerful and simple

Javascript HTML5 canvas library

Fabric provides interactive object model on top of canvas element

Fabric also has SVG-to-canvas (and canvas-to-SVG) parser