转:利用node压缩、合并js,css,图片
1.安装nodejs
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,图片的更多相关文章
- Grunt的配置及使用(压缩合并js/css)
Grunt的配置及使用(压缩合并js/css) 安装 前提是你已经安装了nodejs和npm. 你能够在 nodejs.org 下载安装包安装.也能够通过包管理器(比方在 Mac 上用 homebre ...
- 前端构建工具 Gulp 压缩合并JS/CSS 并添加版本号、ES6转ES5
Gulp 基于 Node.js 的前端构建工具,可以实现前端代码的编译(sass.less).压缩合并(JS.CSS).测试:图片的压缩:已经添加 JS 和 CSS 版本号,防止浏览器缓存. 1. 安 ...
- 第十一节:Bundles压缩合并js和css及原理分析
一. 简介 1.背景:浏览器默认一次性请求的网络数是有上限的,如果你得js和css文件太多,就会导致浏览器需要多次加载,影响页面的加载速度, MVC中提供Bundles的方式压缩合并js和css,是M ...
- 引用:使用grunt 压缩 合并js、css文件
引用:https://www.jianshu.com/p/08c7babdec65 压缩 js 文件 1.创建一个目录 名为grunt 目录.png 2.在grunt目录下创建一个 src目录,存 ...
- Google Pagespeed,自动压缩优化JS/CSS/Image
Google Pagespeed,自动压缩优化JS/CSS/Image 浏览: 发布日期:// 分类:技术分享 关键字: Nginx Appache Pagespeed 自动压缩优化JS/CSS/Im ...
- 自写脚本实现上线前本地批量压缩混淆 js , css 代码。
最近做项目遇到一个要求,就是把本地的 js 和 css 进行压缩后再上线,由于之前项目并没有使用 webpack 之类的库,项目上也因为一些机密不能在线上压缩,这无疑给代码打包压缩带来了很大麻烦,于是 ...
- 使用PHP和GZip压缩网站JS/CSS文件加速网站访问速度
使用PHP和GZip压缩网站JS/CSS文件加速网站访问速度 一些泛WEB 2.0网站为了追求用户体验,可能会大量使用CSS和JS文件.这就导致在服务器带宽一定的情况下,多用户并发访问速度变慢.如何加 ...
- 构建工具是如何用 node 操作 html/js/css/md 文件的
构建工具是如何用 node 操作 html/js/css/md 文件的 从本质上来说,html/js/css/md ... 源代码文件都是文本文件,文本文件的内容都是字符串,对文本文件的操作其实就是对 ...
- maven 压缩、合并 js, css
转载自:http://blog.csdn.net/fangxing80/article/details/17639607 我们知道在 Web 应用开发中为了提高客户端响应速度,需要将页面使用的资源最小 ...
随机推荐
- POJ 1365 Prime Land(数论)
题目链接: 传送门 Prime Land Time Limit: 1000MS Memory Limit: 10000K Description Everybody in the Prime ...
- Node-webkit简介
Node-webkit 概述 Node-webkit 是Github 上一个非常热门的开源项目,它基于著名的浏览器开源项目 Chromium 和服务器端 JavaScript 实现 Node.js 的 ...
- 整数分解 && 质因数分解
输入整数(0-30)分解成所有整数之和.每四行换行一次. 一种方法是通过深度优先枚举出解.通过递归的方式来实现. #include <stdio.h> #include <strin ...
- UIProgressView(进度条控件)
UIProgressView *pr=[[UIProgressView alloc]init]; pr.frame=CGRectMake(150.0, 190.0, 130.0, 30.0);//进度 ...
- MySQL学习笔记——函数
常用函数 ALTER TABLE tb_emp ); #插入数据 INSERT INTO tb_dept() VALUE(,'市场部','负责市场工作'); # concat 连接 SELECT CO ...
- fixed的left:50%,漂浮
.floor-box{width: 44px; border: 1px solid #ccc; position: %; z-index: } 漂浮距离,距中间50% .floor-box{width ...
- input disabled 表单禁用
启用 <input type="> 禁用 <input type=" disabled="">
- Python之路【第十六篇续】Django进阶篇
Django请求生命周期 首先:对于所有的web框架来说本质就是一个socket服务端,浏览器是socket客户端 路由系统 在Django的urls中我们可以根据一个URL对应一个函数名来定义路由规 ...
- 浅谈JavaScript中的定时器
引言 使用setTimeout()和setInterval()创建的定时器可以实现很多有意思的功能.很多人认为定时器是一个单独的线程(之前我也是),但是JavaScript是运行在单线程环境中的,而定 ...
- QT读写ini配置文件
/********下面是写ini文件*************************/ //Qt中使用QSettings类读写ini文件 //QSettings构造函数的第一 ...