使用UglifyJS合并/压缩JavaScript的方法

build.js中的代码会去调用UglifyJS的接口函数以执行压缩任务。

1，去github下载最新的UglifyJS。两种方式下载，如果安装了git，进入git控制台使用如下命令
git clone git://github.com/mishoo/UglifyJS.git

或者使用http方式下载，点击zip下载。解压后其目录结构如下

2，新建一个项目（文件夹）myApp，将uglify-js.js和lib目录拷贝到自己的项目中。如下

3，在myApp中新建一个compress.js，内容如下


代码如下:

var fs = require('fs');
var jsp = require("./uglify-js").parser;
var pro = require("./uglify-js").uglify;

var origCode = "var abc = function(){ var one = 5; return one;}";
var ast = jsp.parse(origCode); // parse code and get the initial AST
ast = pro.ast_mangle(ast); // get a new AST with mangled names
ast = pro.ast_squeeze(ast); // get an AST with compression optimizations
var finalCode = pro.gen_code(ast); // compressed code here
console.log(finalCode);

这段代码的大概意思是取fs模块，它是node的文件模块。 接着取UglifyJS的两个模块。后面就是UglifyJS的压缩流程了。

4，打开命令行，执行compress.js

控制台输出了压缩后的代码。好了，就这么简单。
5，既然在node环境下，当然可以写一个函数直接读取源文件，压缩后输出到指定的目录。将以上代码封装到一个函数中，如下


代码如下:

// 读取一个文件，压缩之
function buildOne(flieIn, fileOut) {
var origCode = fs.readFileSync(flieIn, 'utf8');
var ast = jsp.parse(origCode);
ast = pro.ast_mangle(ast);
ast = pro.ast_squeeze(ast);

var finalCode = pro.gen_code(ast);

fs.writeFileSync(fileOut, finalCode, 'utf8');
}

将我写的ajax-1.0.js压缩，输出到myApp目录中


代码如下:

buildOne('ajax-1.0.js', 'ajax-min.js');

示例代码UglifyJS_test

赞 (0)

相关推荐

  • 高性能WEB开发 JS、CSS的合并、压缩、缓存管理

    高性能WEB开发 JS、CSS的合并、压缩、缓存管理

    存在的问题: 合并.压缩文件主要有2方面的问题: 1. 每次发布的时候需要运行一下自己写的bat文件或者其他程序把文件按照自己的配置合并和压缩. 2. 因生产环境和开发环境需要加载的文件不一样,生产环境为了需要加载合并.压缩后的文件,而开发环境为了修改.调试方便,需要加载非合并.压缩的文件,所以我们常常需要在JSP中类似与下面的判断代码: 复制代码 代码如下: <c:if test="${env=='prod'}"> <script type="text/j

  • 使用GruntJS构建Web程序之合并压缩篇

    使用GruntJS构建Web程序之合并压缩篇

    有如下步骤: 1.新建项目Bejs2.新建文件package.json3.新建文件Gruntfile.js4.命令行执行grunt任务 一.新建项目Bejs源码放在src下,该目录有两个子目录asset和js.js下放selector.js和ajax.js,这在上一篇已经讲了如何合并压缩它们.这篇只关注asset目录,asset目录下放了一些图片和css文件.一会会把两个css资源reset.css和style.css合并,压缩到dest/asset目录.一个合并版本all.css,一个压缩版本

  • Asp.net程序优化js、css实现合并与压缩的方法

    本文实例讲述了Asp.net程序优化js.css实现合并与压缩的方法.分享给大家供大家参考.具体实现方法如下: 访问时将js和css压缩并且缓存在客户端, 采用的是Yahoo.Yui.Compressor组件来完成的,用户可以点击此处本站下载. 创建一个IHttpHandler来处理文件 复制代码 代码如下: public class CombineFiles : IHttpHandler {         private const string CacheKeyFormat = "_Cac

  • 小心！AngularJS结合RequireJS做文件合并压缩的那些坑

    小心！AngularJS结合RequireJS做文件合并压缩的那些坑

    在项目使用了AngularJS框架,用RequireJS做异步模块加载(AMD),在做文件合并压缩时,遇到了一些坑,有些只是解决了,但不明白原因. 那些坑 1. build.js里面的paths必须跟main.js里面的保持一致. 这个build.js就是r.js使用的配置文件,而main.js就是RequireJS的main文件.在合并压缩时候,build.js文件里面也需要写paths,而且还是跟main.js一样,我很奇怪为什么就不能识别main里面的require.config的path

  • 使用UglifyJS合并/压缩JavaScript的方法

    使用UglifyJS合并/压缩JavaScript的方法

    build.js中的代码会去调用UglifyJS的接口函数以执行压缩任务. 1,去github下载最新的UglifyJS.两种方式下载,如果安装了git,进入git控制台使用如下命令 git clone git://github.com/mishoo/UglifyJS.git 或者使用http方式下载,点击zip下载.解压后其目录结构如下 2,新建一个项目(文件夹)myApp,将uglify-js.js和lib目录拷贝到自己的项目中.如下 3,在myApp中新建一个compress.js,内容如

  • Microsoft Ajax Minifier 压缩javascript的方法

    Microsoft Ajax Minifier 压缩javascript的方法

    但常用的命令是  ajaxmin -a -h inputfile.js -o outputfile.js(这种是高压缩方式) 也可以对JS代码进行分析 命令是 ajaxmin inputfile.js -a -w:3 更多的使用方法请参考 Help 说明. ajaxmin.exe 下载 Microsoft AJAX 库 (第六个预览版)Ajaxmin压缩多文件的时候: Ajaxmin -inputfile_1 -inputfile_2 -o -oututfile /Eo:utf-8 /Ei:ut

  • node下使用UglifyJS压缩合并JS文件的方法

    现在UglifyJS的最新版本为 2.8.13,主要功能为JS的压缩和合并,下面直接进入教程: 安装: <span style="font-size:18px;color:#006600;">npm install uglify-js -g</span> 将uglifyjs安装为全局变量,方便我们在任何地方使用. <span style="color:#006600;">下面是shell命令的中文解释: * source-map

  • 使用grunt合并压缩js和css文件的方法

    需要了解的知识: 1.nodejs的安装与命令行使用 2.nodejs安装应用 3.grunt的初步了解 本文已假定读者已经熟悉以上知识. 好,我们继续: 任务1:将src目录下的所有zepto及插件合并,并压缩. --src/ ajax.js assets.js callbacks.js data.js deferred.js detect.js event.js form.js fx.js fx_methods.js gesture.js ie.js ios3.js selector.js

  • Javascript实用方法之json合并的场景分析

    场景 2个json合并, jQuery 的“extend()”方法有两个原型:合并的方法,分别是浅合并和深度合并,其实浅合并只是json的第一层被合并,而深度合并是全部层数都被合并,分别如下写法: 1.浅合并,target被object1...合并,只有一层 $.extend( target [, object1 ] [, objectN ] ) 深度合并,target被object1...合并,包含一层二层三层... 要深度合并, [deep]需要为true, 后面覆盖前面,所以如要要保留后面

  • JS实现合并json对象的方法

    JS实现合并json对象的方法

    本文实例讲述了JS实现合并json对象的方法.分享给大家供大家参考,具体如下: 一.问题: 求json对象合并的方法 var a ={"a":"1","b":"2"} var b ={"c":"3","d":"4","e":"5"} 想得到结果: var c ={"a":"1&q

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

    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

  • 基于gulp合并压缩Seajs模块的方式说明

    基于gulp合并压缩Seajs模块的方式说明

    之前的项目一直采用grunt来构建,然后用requirejs做模块化,requirejs官方有提供grunt的插件来做压缩合并.现在的项目切到了gulp,模块化用起了seajs,自然而然地也想到了模块合并压缩的问题. 然后一开始在解决这个问题的时候,并不是很顺利,在npm上并没有那种特别流行的专门用来做seajs合并压缩的gulp插件,虽然在seajs的github上也看了不少的issue,但是大多数都是只能将所有的模块文件合并成一个总的文件,这对于单页面的应用来说肯定没有问题,但是对于多页面的

  • YUI Compressor压缩JavaScript原理及微优化

    最近写一个jQuery插件,在最后完成优化时,对比发现压缩后文件比较大,就思考那些是可以被修改和优化的,发现压缩原理也有很大的空间可以学习,通过这次对YUI Compressor压缩JavaScript深有体会,那些是可以被压缩的,特别是那些不能被压缩的,都需要很清楚,这样才能写出来的插件才能保持文件更小,代码更精巧,而且优化的过程中也会发现代码待改良的地方,对以后也有很大帮助.随便在网上找来一篇文章做记录了. YUI Compressor 压缩 JavaScript 的内容包括: 移除注释 移

随机推荐