转:利用node压缩、合并js,css,图片

时间:2022-09-21 22:18:14

1.安装nodejs

http://nodejs.org/

2.安装各自的node package

js我用的是UglifyJS github地址:https://github.com/mishoo/UglifyJS

css我用的是clean-css github地址:https://github.com/GoalSmashers/clean-css

图片用的是node-smushit    github地址:https://github.com/colorhook/node-smushit

3.编写代码

//js
var fs = require('fs');
var jsp = require("uglify-js").parser;
var pro = require("uglify-js").uglify;
 
function jsMinifier(flieIn, fileOut) {
     var flieIn=Array.isArray(flieIn)? flieIn : [flieIn];
     var origCode,ast,finalCode='';
     for(var i=0; i<flieIn.length; i++) {
        origCode = fs.readFileSync(flieIn[i], 'utf8');
        ast = jsp.parse(origCode);
        ast = pro.ast_mangle(ast);
        ast= pro.ast_squeeze(ast);
        finalCode +=';'+ pro.gen_code(ast);
     }
    fs.writeFileSync(fileOut, finalCode, 'utf8');
}
 
//jsMinifier('./file-src/test2.js', './file-smin/test-min.js');  //单个文件压缩
jsMinifier(['./file-src/test.js','./file-src/test2.js'], './file-smin/test-min.js'); //合并压缩
命令翻译

UglifyJS使用

uglifyjs [ 选项... ] [ 文件 ]

文件参数应该放在选项后面,uglifyjs 会读取文件中的javascript代码进行处理。如果你不指定输出的文件名,那么他会把处理后的内容输出到命令行中。

支持的选项 :

●   -b 或 –beautify - 输出格式化代码,当传入该参数,下面的附加选项用于更美观的控制格式化:

●   -i N 或 –indent N - 缩进级别(空格数量)

●   -q 或 –quote-keys - 是否用引号引起字符串对象的键(默认只会引起不能被正确标志的键名)

●   –ascii -默认 UglifyJS 不处理字符编码而直接输出 Unicode 字符,通过传入该参数将非ASCII编码的字符转化为\cXXXX的序列(输出总按照UTF8编码,但传入该选项能得到ASCII编码的输出)。

●   -nm 或 –no-mangle - 不改变变量名称

●   -ns 或 –no-squeeze - 不调用 ast_squeeze() 函数(该函数会做多种优化使得结果更小,可读性略有降低)

●   -mt 或 –mangle-toplevel - 在*作用域打乱变量名称(默认不开启)

●   –no-seqs - 当调用 ast_squeeze() 将会合并多个语句块为一个语句块,如 ”a=10; b=20; foo()” 将被转换为 ”a=10,b=20,foo()”

●   –no-dead-code - 默认 UglifyJS 将会删除不被用到的代码,传入该参数禁用此功能。

●   -nc 或 –no-copyright - 默认 uglifyjs 会在输出后的代码中添加版权信息等注释代码,传入该参数禁用此功能。

●   -o 文件名 或 –output 文件名 - 指定输出文件名,如果不指定,则打印到标准输出(STDOUT)

●   –overwrite - 如果传入的JS代码来自文件而不是标准输入,传入该参数,输出会覆盖该文件。

●   –ast - 传入该参数会得到抽象的语法树而不是Javascript,对调试或了解内部代码很有用。

●   -v 或 –verbose - 在标准错误输出一些信息(目前的版本仅输出操作用时)

●   –extra - 开启附加优化,这些优化并未得到全面的测试。

●   –unsafe - 开启其他附加优化,这些优化已知在特定情况下并不安全,目前仅支持:

●   foo.toString() ==> foo+””

●   –max-line-len (默认32K字节) - 在32K字节出增加换行符,传入0禁用此功能。

●   –reserved-names - 一些类库会依赖一些变量,该参数指定的名称不会被混淆掉,多个用逗号隔开

//css
var cleanCSS = require('clean-css');
 
function cssMinifier(flieIn, fileOut) {
     var flieIn=Array.isArray(flieIn)? flieIn : [flieIn];
     var origCode,finalCode='';
     for(var i=0; i<flieIn.length; i++) {
        origCode = fs.readFileSync(flieIn[i], 'utf8');
        finalCode += cleanCSS.process(origCode);
     }
    fs.writeFileSync(fileOut, finalCode, 'utf8');
}
  
//cssMinifier('./file-src/indexw_20120913.css', './file-smin/index.css');  //单个文件压缩
cssMinifier(['./file-src/index_20120913.css','./file-src/indexw_20120913.css'], './file-smin/index.css');
 
//图片
var imgMinifier = require('node-smushit');
//imgMinifier.smushit('./file-src/images', {recursive: true}); //递归
imgMinifier.smushit('./file-src/images');

  

转:利用node压缩、合并js,css,图片的更多相关文章

  1. Grunt的配置及使用(压缩合并js&sol;css)

    Grunt的配置及使用(压缩合并js/css) 安装 前提是你已经安装了nodejs和npm. 你能够在 nodejs.org 下载安装包安装.也能够通过包管理器(比方在 Mac 上用 homebre ...

  2. 前端构建工具 Gulp 压缩合并JS&sol;CSS 并添加版本号、ES6转ES5

    Gulp 基于 Node.js 的前端构建工具,可以实现前端代码的编译(sass.less).压缩合并(JS.CSS).测试:图片的压缩:已经添加 JS 和 CSS 版本号,防止浏览器缓存. 1. 安 ...

  3. 第十一节:Bundles压缩合并js和css及原理分析

    一. 简介 1.背景:浏览器默认一次性请求的网络数是有上限的,如果你得js和css文件太多,就会导致浏览器需要多次加载,影响页面的加载速度, MVC中提供Bundles的方式压缩合并js和css,是M ...

  4. 引用:使用grunt 压缩 合并js、css文件

    引用:https://www.jianshu.com/p/08c7babdec65 压缩 js 文件 1.创建一个目录 名为grunt   目录.png 2.在grunt目录下创建一个 src目录,存 ...

  5. Google Pagespeed,自动压缩优化JS&sol;CSS&sol;Image

    Google Pagespeed,自动压缩优化JS/CSS/Image 浏览: 发布日期:// 分类:技术分享 关键字: Nginx Appache Pagespeed 自动压缩优化JS/CSS/Im ...

  6. 自写脚本实现上线前本地批量压缩混淆 js &comma; css 代码。

    最近做项目遇到一个要求,就是把本地的 js 和 css 进行压缩后再上线,由于之前项目并没有使用 webpack 之类的库,项目上也因为一些机密不能在线上压缩,这无疑给代码打包压缩带来了很大麻烦,于是 ...

  7. 使用PHP和GZip压缩网站JS&sol;CSS文件加速网站访问速度

    使用PHP和GZip压缩网站JS/CSS文件加速网站访问速度 一些泛WEB 2.0网站为了追求用户体验,可能会大量使用CSS和JS文件.这就导致在服务器带宽一定的情况下,多用户并发访问速度变慢.如何加 ...

  8. 构建工具是如何用 node 操作 html&sol;js&sol;css&sol;md 文件的

    构建工具是如何用 node 操作 html/js/css/md 文件的 从本质上来说,html/js/css/md ... 源代码文件都是文本文件,文本文件的内容都是字符串,对文本文件的操作其实就是对 ...

  9. maven 压缩、合并 js&comma; css

    转载自:http://blog.csdn.net/fangxing80/article/details/17639607 我们知道在 Web 应用开发中为了提高客户端响应速度,需要将页面使用的资源最小 ...

随机推荐

  1. 【转】自定义UITableViewCell(registerNib&colon; 与 registerClass&colon; 的区别)

    自定义UITableViewCell大致有两类方法: 使用nib 1.xib中指定cell的Class为自定义cell类型(注意不是设置File's Owner的class) 2.调用 tableVi ...

  2. css3弹性盒模型

    一.简介 css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局. 目 ...

  3. 转: 借助GitHub托管你的项目代码

    转自:http://www.cnblogs.com/edisonchou/p/5990875.html 备注: 原贴关于github使用说明,非常详细易懂.建议看原帖. 借助GitHub托管你的项目代 ...

  4. 夺命雷公狗---node&period;js---11之文件上传

    我们在做文件上传前需要用npm来安装一个插件先, 首先打开项目所在的目录,然后按住shift键然后右键鼠标进入命令行安装formidable 然后开始编写上传的静态页面: <!DOCTYPE h ...

  5. AJAX POST请求中參数以form data和request payload形式在servlet中的获取方式

    HTTP请求中,假设是get请求,那么表单參数以name=value&name1=value1的形式附到url的后面,假设是post请求,那么表单參数是在请求体中,也是以name=value& ...

  6. openstack镜像如何在vmware 环境中运行

    1.云镜像文件下载地址: http://sahara-files.mirantis.com/sahara-juno-spark-1.0.0-ubuntu-14.04.qcow2(安装有sahara-s ...

  7. 201521123045 &lt&semi;java程序设计&gt&semi;第11周学习总结

    201521123045 <java程序设计>第11周学习总结 1. 本周学习总结 2. 书面作业 2. 书面作业 Q1.1.互斥访问与同步访问完成题集4-4(互斥访问)与4-5(同步访问 ...

  8. Python3 的列表

    1:列表: Python的列表比C语言的数组强大的多,数组只能存放相同类型的数据,而列表则像一个大集装箱可以存放整形.浮点型.字符串.对象等 2:创建列表的方法 #创建一个普通列表 list1=[1, ...

  9. C&num;创建 WebApi 项目

    做web api 可以参考一下网友 C#进阶系列——WebApi 接口参数不再困惑:传参详解 - 懒得安分 - 博客园https://www.cnblogs.com/landeanfen/p/5337 ...

  10. 对象的创建与OOP-Klass模型

    1.JVM中OOP-KLASS模型 在JVM中,使用了OOP-KLASS模型来表示java对象,即:1.jvm在加载class时,会创建instanceKlass,表示其元数据,包括常量池.字段.方法 ...