`
chilongxph
  • 浏览: 138260 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

js打包

阅读更多

项目中需要对javascript进行打包和压缩,我选用了yuicompressor

yuicompressor可以压缩JS和CSS文件,去除文件中的无用空格、换行和注释。大大的减小JS和CSS文件的体积。

简单的命令如下

Java代码

java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -o uiiang.js table.js  
java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -o uiiang.js table.js

--type指定要打包的文件类型,可选的有 js和css
--charset 指定字符集
-o 指定输出的文件名,如果不指定这个参数将会把压缩后的内容输出到命令行上
最后的table.js是要打包的源文件

不过这样压缩有一个缺点,只能一个一个文件的进行压缩,所以使用bat进行批处理压缩

建立一个compresjs.bat文件,内容如下

Java代码

(dir %1 /aa /b /s | findstr /e /c:"js") >tmp.txt   
for /f %%i in (tmp.txt) do java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -o %%i.tmp %%i & copy %%i".tmp" %%i & del %%i".tmp"  
(dir %1 /aa /b /s | findstr /e /c:"js") >tmp.txtfor /f %%i in (tmp.txt) do java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -o %%i.tmp %%i & copy %%i".tmp" %%i & del %%i".tmp"
运行这个bat文件,会自动寻找本文件所在目录下所有子文件夹中的.js文件,进行压缩并覆盖源文件。

compresjs.bat使用的方法只是对文件进行压缩,如果有10个源文件,还会压缩成10个文件,并没有进行打包。 我们可以对他进行更进一步的处理,把这10个源文件打包压缩成1个文件,就像ext-all.js那样。

建立一个packagejs.bat文件,内容如下

Java代码

for /r ..\WebContent\js %%i in (*.js) do type %%i>>uiiang-debug.js   
java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -o uiiang.js uiiang-debug.js  
for /r ..\WebContent\js %%i in (*.js) do type %%i>>uiiang-debug.jsjava -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -o uiiang.js uiiang-debug.js
在packagejs.bat中,先将..\WebContent\js下的所有JS文件内容合并到uiiang-debug.js文件中,然后再使用yuicompressor对uiiang-debug.jsp压缩成uiiang.js,这样就可以得到一个经过压缩并包含全部.js文件的代码了。

packagejs.bat中使用的方法有一个缺点,那就是它在合并js文件时的顺序,是按照文件夹及子文件夹还有js文件的排列顺序进行合并的,也就是按文件名顺序排列。但是在我们实际项目中,一般情况下JS文件的引用是要指定一个特定的加载顺序,不然的话就会报错。所以还要对packagejs.bat进行再进一步的改造。

首先要建立一个列表文件dir.txt

Java代码

..\WebContent\js\widgets\WidgetInit.js   
..\WebContent\js\utils\Cache.js   
..\WebContent\js\common\GlobalConstant.js   
..\WebContent\js\common\GlobalVariable.js   
..\WebContent\js\common\GlobalFunc.js   
..\WebContent\js\core\Initialize.js  
..\WebContent\js\widgets\WidgetInit.js..\WebContent\js\utils\Cache.js..\WebContent\js\common\GlobalConstant.js..\WebContent\js\common\GlobalVariable.js..\WebContent\js\common\GlobalFunc.js..\WebContent\js\core\Initialize.js
在这个文件中,按照JSP中指定的JS文件加载顺序写好文件的路径
再修改packagejs.bat
Java代码

for /f %%i in (dir.txt) do type %%i >> uiiang-debug.js   
java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -o uiiang.js uiiang-debug.js  
for /f %%i in (dir.txt) do type %%i >> uiiang-debug.jsjava -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -o uiiang.js uiiang-debug.js
执行这个packagejs.bat文件后,批处理命令会自动读取dir.txt并按照你指定的顺序逐行取出.js文件的路径进行,把文件内容合并到uiiang-debug.js中。

另外要注意的一点就是在dir.txt中,一定要把所需要打包压缩的的JS文件路径全部列出来,因为新的pakagejs.bat不会再自动寻找全部的JS文件了,如果有遗漏就只好报错

至此,批处理压缩打包js文件的工作就完成了,还可以将代码中的.JS换成.css对CSS文件进行打包,当然yuicompressor的--type也要改成css。

分享到:
评论

相关推荐

    js.rar_JS 打包_javascript 打包_js_js packed_js打包

    JavaScript打包通常涉及以下几个方面: 1. **模块管理**:在大型项目中,JS代码会被拆分成多个模块,每个模块负责一部分功能。打包工具可以将这些模块组合成一个可执行的文件。 2. **依赖管理**:打包时会处理库和...

    pdf.js打包文件

    "pdf.js打包文件"指的是将PDF.js的源码经过特定的构建过程,如使用Gulp的generic任务,打包成可以直接在Web项目中集成和使用的资源。 首先,让我们深入了解一下PDF.js的核心功能。PDF.js的主要目标是提供一个原生的...

    一个javascript打包工具比WebPack快10倍

    7. **多平台支持**:除了Web应用,Fuse Box还适用于Node.js环境,可以处理服务器端的JavaScript打包。 8. **友好的社区**:Fuse Box有一个活跃的开发者社区,不断推动其发展,提供问题解答和技术支持。 尽管Fuse ...

    javascript打包压缩(调用google的cluster compiler)

    JavaScript打包压缩是一个重要的步骤,特别是在开发大型Web应用时,它能显著提高页面加载速度并减少网络传输的数据量。Google的Cluster Compiler是这个过程中的一个重要工具,尤其在需要高性能处理大量JavaScript...

    js打包工具

    JavaScript(简称JS)打包工具是开发过程中不可或缺的一部分,它们能够帮助开发者整理、压缩、合并以及优化JavaScript代码,以便更高效地在网页上运行,并减少网络传输的数据量。在这个数字化时代,网页性能至关重要...

    nw.js打包处理教程(将html打包成PC应用的教程)

    nw.js打包处理教程 NW.js 是一个基于 Chromium 和 Node.js 的应用程序 runtime,允许开发者使用 HTML、CSS、JavaScript 等 Web 技术创建桌面应用程序。NW.js 提供了一个完整的解决方案,帮助开发者快速创建桌面应用...

    Auto.js打包插件.apk

    因为Auto.js是基于JavaScript的,学习Auto.js的API之前建议先学习JavaScript的基本语法和内置对象,可以使用教程前面的两个JavaScript教程链接来学习。 如果您想要使用TypeScript来开发,目前已经有开发者公布了一...

    require+r.js打包

    在前端开发中,JavaScript代码的组织和管理是一个重要的环节,特别是在大型项目中,代码的模块化、优化和打包显得尤为重要。Require.js是一个流行的AMD(Asynchronous Module Definition)模块加载器,它允许我们在...

    Autojs+打包插件.zip

    Auto.js 是一款强大的Android自动化工具,它允许用户编写JavaScript代码来控制手机,执行各种任务,如点击、滑动、输入、读取数据等,广泛应用于自动化测试、日常事务脚本编写等领域。本压缩包“Autojs+打包插件.zip...

    常用JS打包

    JavaScript(简称JS)是一种轻量级的解释型编程语言,广泛应用于网页和网络应用开发,为用户提供动态交互体验。在现代前端开发中,JS打包是一个关键环节,它将分散的源代码文件整合成一个或多个优化过的文件,以便于...

    JS下载文件、图片,JS打包下载

    JS下载文件、图片,JS打包下载。支持IE、谷歌、火狐、360浏览器。适用于前端人员。 博文已贴源码,点此跳转:https://blog.csdn.net/qq_33427869/article/details/127370164

    ext js 打包资源下载

    Ext JS 是一种流行的JavaScript库,专门用于构建富客户端的Web应用程序。它提供了丰富的用户界面组件,如表格、面板、窗口、菜单等,使得开发者能够创建功能强大的交互式前端应用。在"ext js 打包资源下载"中,我们...

    Auto.js + 打包插件.rar

    Auto.js提供了一个类似于JavaScript的脚本环境,用户可以通过编写简单的代码来控制安卓设备。它支持触屏事件模拟、定时任务、全局变量、函数定义等多种功能,使得非程序员也能快速上手进行自动化操作。 描述中提到...

    Auto.js 4.1.0 apk及打包插件

    Auto.js是一款基于JavaScript的自动化工具,它允许用户编写脚本来自动化Android设备上的各种任务,如点击、滑动、输入文本等。在Android平台上,Auto.js以其简单易用的编程环境和强大的功能,深受开发者和自动化爱好...

    对dojo的js打包.doc

    ### Dojo JavaScript 库的打包方法详解 #### 一、Dojo简介与打包的重要性 Dojo 是一个开源的 JavaScript 框架,主要用于构建高性能、跨平台的 Web 应用程序。它提供了一系列丰富的功能,如 AJAX 支持、DOM 操作、...

    gulp打包js,min.js,d.ts

    标题 "gulp打包js,min.js,d.ts" 描述的是使用Gulp工具进行JavaScript项目构建的过程,主要涉及将源代码打包成JS、压缩成min.js以及生成d.ts类型定义文件。Gulp是一个基于Node.js的自动化任务运行器,它可以极大提高...

    auto.js 4.1.1.apk以及打包插件

    《Auto.js 4.1.1.apk及打包插件详解》 Auto.js是一款功能强大的自动化脚本工具,尤其在Android平台上,它以其简洁的语法和广泛的用途深受开发者和普通用户的喜爱。4.1.1版本是其发展过程中的一个重要里程碑,引入了...

    JS打包工具packer2.wsh.zip

    JS 加密 打包,可以将JS 打包成加密的形式

    javascript 打包 压缩 加密 工具

    我见过最好的压缩工具,支持Base62 编码加密,压缩率高,压缩 ext-all-w-comment.js 压缩前 2.6MB压缩后 400KB ,不出现任何错误,Base62 编码能使JS代码难以阅读,保护您的知识产权。

    html+js实现将多个在线文件打包为压缩包下载

    html和js实现将多个在线文件打包为压缩包下载,将多个文件一起打包为zip格式文件后后下载。使用 JavaScript 中的 JSZip 库将多个在线附件打包为压缩包,然后使用浏览器的下载功能将其下载到本地

Global site tag (gtag.js) - Google Analytics