一、指令压缩

  1.安装node,npm——详细见nodejs安装与使用入门

  2.安装 uglifyjs——npm install -g uglify-js

  3.压缩例子:1)uglifyjs  main.js->main-min.js 
        2)uglifyjs main.js -o main-min.js

二、批量压缩

1)新建txt文件,内容如下

  1. @echo off
  2. :: 设置压缩JS文件的根目录,脚本会自动按树层次查找和压缩所有的JS
  3. SET JSFOLDER=D\uglifyDestination(注意路劲中不能有空格)
  4. echo 正在查找JS文件
  5. chdir /d %JSFOLDER%
  6. for /r . %%a in (*.js) do (
  7. @echo 正在压缩 %%~a ...
  8. uglifyjs %%~fa -m -o %%~fa
  9. )
  10. echo 完成!
  11. pause & exit

2)另存为.bat文件

3)将需要压缩的js文件放置目录

4)运行bat文件

三、编程方式压缩

说明:编写一个build.js文件,使用node命令执行该文件。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,内容如下

  1. var fs = require('fs');
  2. var jsp = require("./uglify-js").parser;
  3. var pro = require("./uglify-js").uglify;
  4.  
  5. var origCode = "var abc = function(){ var one = 5; return one;}";
  6. var ast = jsp.parse(origCode); // parse code and get the initial AST
  7. ast = pro.ast_mangle(ast); // get a new AST with mangled names
  8. ast = pro.ast_squeeze(ast); // get an AST with compression optimizations
  9. var finalCode = pro.gen_code(ast); // compressed code here
  10. console.log(finalCode);

说明:取fs模块,它是node的文件模块、UglifyJS的两个模块。

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

控制台输出了压缩后的代码。好了,就这么简单。

5,既然在node环境下,当然可以写一个函数直接读取源文件,压缩后输出到指定的目录。将以上代码封装到一个函数中,如下

  1. // 读取一个文件,压缩之
  2. function buildOne(flieIn, fileOut) {
  3. var origCode = fs.readFileSync(flieIn, 'utf8');
  4. var ast = jsp.parse(origCode);
  5. ast = pro.ast_mangle(ast);
  6. ast = pro.ast_squeeze(ast);
  7.  
  8. var finalCode = pro.gen_code(ast);
  9.  
  10. fs.writeFileSync(fileOut, finalCode, 'utf8');
  11. }

6.压缩,输出到myApp目录中

  1. buildOne('main.js', 'main.min.js');

参考:http://home.cnblogs.com/u/snandy/

uglifyjs压缩js文件(指令压缩/ 批量压缩/ 编程方式压缩)的更多相关文章

  1. npm压缩js文件

    参考:https://blog.csdn.net/msy_msy/article/details/78261383 1.压缩单个js文件 cnpm install uglify-js -g 安装 1& ...

  2. 如何使用grunt压缩js文件

    jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...

  3. iis7 压缩js文件和启用gzip压缩

    压缩js文件 打开IIS 7的配置文件:c:\windows\system32\inetsrv\config\applicationhost.config 在<staticContent loc ...

  4. 吉特仓储管系统(开源)--使用Grunt压缩JS文件

    在吉特仓储管理系统开发的过程中大量使用到了JS,随着JS文件的增多我们需要对JS进行有效的管理,同时也要对JS文件进行一些压缩.文本用于记录一下使用grunt压缩JS的操作步骤,便于遗忘之后记录查找, ...

  5. yui压缩js文件

    http://ganquan.info/yui/?hl=zh-CN yui压缩js文件 在工程中,js文件的管理是个麻烦事,并且随着项目越做越多,各种js文件混杂,有时候一个页面需要加载好多js文件, ...

  6. gulp压缩js文件报错日志

    输出 gulp-uglify 压缩js文件时报错信息 gulp.task('es6', function () { return gulp.src('src/main/webapp/bower_com ...

  7. 【链接】在线压缩JS文件

    在线压缩JS文件: http://yui.2clics.net/ https://refresh-sf.com/

  8. 利用Node 搭配uglify-js压缩js文件,批量下载图片到本地

    Node的便民技巧-- 压缩代码 下载图片 压缩代码 相信很多前端的同学都会在上线前压缩JS代码,现在的Gulp Webpack Grunt......都能轻松实现.但问题来了,这些都不会,难道就要面 ...

  9. grunt压缩js文件

    grunt是node中很好的管理项目的工具,利用它可以实现对整个项目的管理,避免很多重复性的工作如合并.压缩,检查语法等. 使用grunt首先要安装node环境,nodejs官网http://node ...

随机推荐

  1. Android GridView属性集合

    GridView的一些特殊属性: 1.android:numColumns=”auto_fit”   //GridView的列数设置为自动 2.android:columnWidth=”90dp &q ...

  2. Java8特性详解 lambda表达式 Stream

    1.lambda表达式 Java8最值得学习的特性就是Lambda表达式和Stream API,如果有python或者javascript的语言基础,对理解Lambda表达式有很大帮助,因为Java正 ...

  3. UITextField控件处理键盘弹出时遮住输入框的问题

    原文连接: http://www.devdiv.com/thread-70159-1-1.html 实现以下三个方法,如果弹出的键盘会遮住输入框 ,整体的界面会向上移动,这样就不会遮住输入框了.自己增 ...

  4. ACM vim配置

    ACM现场赛时用的,比较简短,但是主要的功能都有了. 直接打开终端输入gedit ~/.vimrc 把下面的东西复制到里面就行了. filetype plugin indent on colo eve ...

  5. HDU 5120 Intersection(几何模板题)

    题意:给定两个圆环,求两个圆环相交的面积. 思路:由于圆心和半径不一样,分了好多种情况,后来发现只要把两个圆相交的函数写好之后就不需要那么复杂了.两个圆相交的面积的模板如下: double area_ ...

  6. C#解leetcode 238. Product of Array Except Self

    Given an array of n integers where n > 1, nums, return an array output such that output[i] is equ ...

  7. display:inline、block、inline-block的区别(转)

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  8. 谷歌插件postman如果不能用,就用git命令发送post请求

     curl -X POST --data '{"name":"zfpx"}' -H 'Content-Type:application/json' http:/ ...

  9. 【转】HttpServlet详解

    [转]HttpServlet详解 Servlet的框架是由两个Java包组成:javax.servlet和javax.servlet.http. 在javax.servlet包中定义了所有的Servl ...

  10. 关于NSURL的一些属性的记录

    关于NSURL的一些属性的记录 NSLog(@"%@", request.URL.absoluteString); NSLog(@"%@", request.U ...