nodejs压缩js css配置文档
yui压缩JS和CSS文件
yui压缩JS和CSS⽂件 CSS和JS⽂件经常需要压缩，⽐如我们看到的XX.min.js是经过压缩的JS。
压缩⽂件第⼀个是可以减⼩⽂件⼤⼩，第⼆个是对于JS⽂件，默认会去掉所有的注释，⽽且会去掉所有的分号，也会将我们的⼀些参数替换为⼀些简单的a,b之类的变量，从界⾯看起来⾮常难阅读，起到加密作⽤。
1.查看yui使⽤帮助:G:\>java -jar yuicompressor-2.4.7.jarUsage: java -jar yuicompressor-x.y.z.jar [options] [input file]Global Options-h, --help Displays this information--type <js|css> Specifies the type of the input file--charset <charset> Read the input file using <charset>--line-break <column> Insert a line break after the specified column number-v, --verbose Display informational messages and warnings-o <file> Place the output into <file>. Defaults to stdout.Multiple files can be processed using the following syntax:java -jar yuicompressor.jar -o '.css$:-min.css' *.cssjava -jar yuicompressor.jar -o '.js$:-min.js' *.jsJavaScript Options--nomunge Minify only, do not obfuscate--preserve-semi Preserve all semicolons--disable-optimizations Disable all micro optimizationsIf no input file is specified, it defaults to stdin. In this case, the 'type'option is required. Otherwise, the 'type' option is required only if the inputfile extension is neither 'js' nor 'css'.2.压缩JS: 默认会去掉所有的注释，⽽且会去掉所有的分号，也会将我们的⼀些参数替换为⼀些简单的a,b之类的变量，起到加密作⽤。
压缩js和css文件的原理
压缩js和css⽂件的原理
压缩：删除 Javascript 代码中所有注释、跳格符号、换⾏符号及⽆⽤的空格，从⽽压缩 JS ⽂件⼤⼩。
javascript⽂件压缩的原理
第⼀个当然就是去掉注释了。
另外就是跟CSS压缩相同的去掉换⾏符，空格什么的。
JAVASCRIPT中有⼏种变量形式，如变量，函数名，函数的参数等，通常我们在⼿写JS代码的时候，为了便于理解，我们都会给这些变量名以直观易懂的字符串，如：var title=”javascript”;这个习惯是值得推崇的。
但是，这些变量对于⽤户理解有帮助，对于计算机却没什么影响，如果我们把前⾯的句⼦变成：var a=”javascript”;对电脑来讲是⼀样的。
通常深度压缩JS都必须要做的⼀步就是尽量地缩短变量名，因为⼀份体积巨⼤的JS代码，其中的变量名会占去不少空间。
requireJS对文件合并与压缩（二）
requireJS对⽂件合并与压缩（⼆）RequireJS提供了⼀个打包与压缩⼯具r.js，r.js的压缩⼯具使⽤UglifyJS进⾏压缩的或Closure Compiler。
requireJS对互相依赖模块进⾏合并与压缩，可以对JS，CSS压缩，甚⾄可以对整个项⽬进⾏打包。
r.js是基于nodeJS的，所以本机电脑上需要有node环境。
下⾯还是来看看我整个项⽬结构吧，如下：现在是这样的，app/a.js，app/b.js，app/c.js，app/d.js，有依赖关系，分别是a依赖于b，b依赖于c，c依赖于d，⼊⼝⽂件app.js，代码如下：a.jsdefine(["app/b"],function (b) {return {"name":1}});b.jsdefine(function(require, exports, module) {var c = require('app/c');});c.jsdefine(function(require, exports, module) {var d = require('app/d');});d.jsdefine(function(require, exports, module) {alert(1);});app.jsrequire(['app/a'],function(jq){});如果我不压缩与合并代码，那么我们在浏览器下看请求如下：现在我们⼀步步来解释下合并与压缩吧！⼀：打开cmd命令窗⼝，进⼊项⽬requirejs内，如下：执⾏命令 node r.js –o baseUrl=js name=app out=build.js命令即可，如上所⽰已经在根⽬录下⽣成build.js了，我们下⾯再来看看⽬录结构如下：下⾯我们再来看看build.js代码了，如下所⽰：define("app/d",["require","exports","module"],function(e,t,n){alert(1)}),define("app/c",["require","exports","module","app/d"],function(e,t,n){varr=e("app/d")}),define("app/b",["require","exports","module","app/c"],function(e,t,n){var r=e("app/c")}),define("app/a",["app/b"],function(e) {return{name:1}}),require(["app/a"],function(e){}),define("app",function(){});已经对app.js，app/a.js，app/b.js，app/c.js，app/d.js，的代码进⾏合并与压缩了。
nodejs中使用archive压缩文件的实现代码
nodejs中使⽤archive压缩⽂件的实现代码前⾔archive是⼀款在nodejs中可以实现跨平台打包的⼯具可以将⽂件压缩为zip或rar格式是⼀个⽐较好⽤的第三⽅模块installnpm install archiver --saveQuick Start// require modulesvar fs = require('fs');var archiver = require('archiver');// create a file to stream archive data to.var output = fs.createWriteStream(__dirname + '/example.zip');//设置压缩格式为zipvar archive = archiver('zip', {zlib: { level: 9 } // Sets the compression level.});// listen for all archive data to be written// 'close' event is fired only when a file descriptor is involvedoutput.on('close', function() {console.log(archive.pointer() + ' total bytes');console.log('archiver has been finalized and the output file descriptor has closed.');});// This event is fired when the data source is drained no matter what was the data source.// It is not part of this library but rather from the NodeJS Stream API.// @see: https:///api/stream.html#stream_event_endoutput.on('end', function() {console.log('Data has been drained');});// good practice to catch this error explicitlyarchive.on('error', function(err) {throw err;});// pipe archive data to the filearchive.pipe(output);// append a file from streamvar file1 = __dirname + '/file1.txt';archive.append(fs.createReadStream(file1), { name: 'file1.txt' });// append a file from stringarchive.append('string cheese!', { name: 'file2.txt' });// append a file from buffervar buffer3 = Buffer.from('buff it!');archive.append(buffer3, { name: 'file3.txt' });// append a filearchive.file('file1.txt', { name: 'file4.txt' });// append files from a sub-directory and naming it `new-subdir` within the archivearchive.directory('subdir/', 'new-subdir');// append files from a sub-directory, putting its contents at the root of archivearchive.directory('subdir/', false);// append files from a glob patternarchive.glob('subdir/*.txt');// finalize the archive (ie we are done appending files but streams have to finish yet)// 'close', 'end' or 'finish' may be fired right after calling this method so register to them beforehandarchive.finalize();实际使⽤实际使⽤中情况可能会⽐较多需要打包的源⽂件⼀般为远程⽂件，⽐如某⼀个第三⽅的⽂件存放地址，这时则需要先将第三⽅⽂件下载到本地⽰例⽅法，可以根据实际需要修改相应的参数function download(files){//下载⽂件的本地存档地址//⽰例 files = [{name: 'xxxx.js',url:'https://xx/xx/xxxx.js'}]let dirPath = path.resolve(__dirname, '⽂件存放的本地位置')mkdir(dirPath);let tmps = files.map((item,index) => {let stream = fs.createWriteStream(path.resolve(dirPath, ));return new Promise((resolve,reject)=>{try {request(item.url).pipe(stream).on("close", function (err) {console.log("⽂件[" + + "]下载完毕");resolve({url: path.resolve(dirPath, ),name: })});} catch (e) {reject(e||'')}})});return new Promise((res,rej)=>{Promise.all(tmps).then((result) => {console.log(result)res(result)}).catch((error) => {console.log(error||'')})})}//创建⽂件夹⽬录function mkdir(dirPath) {if (!fs.existsSync(dirPath)) {fs.mkdirSync(dirPath);console.log("⽂件夹创建成功");} else {console.log("⽂件夹已存在");}}将下载到本地的⽂件打包为⼀个zip⽂件，可以参照 Quick Start 中的api组合使⽤// append files from a sub-directory, putting its contents at the root of archivearchive.directory('subdir/', false);//要注意第⼆个参数false，这个参数代表打包后的⽂件相对于output的⽬录结构，不写这个参数代表按照第⼀个参数('subdir/')的⽬录层级打包之后的⽂件位置是在本地位置，此时在推送到前端页⾯中下载url需要组装成http或https的地址以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
前端构建工具Gulp压缩合并JSCSS并添加版本号、ES6转ES5
前端构建⼯具Gulp压缩合并JSCSS并添加版本号、ES6转ES5 Gulp 基于 Node.js 的前端构建⼯具，可以实现前端代码的编译（sass、less）、压缩合并（JS、CSS）、测试；图⽚的压缩；已经添加 JS 和 CSS 版本号，防⽌浏览器缓存。
1. 安装全局安装$ npm install gulp -g进⼊项⽬跟⽬录，初始化 npm init ，然后安装：$ npm install gulp安装插件sass的编译（gulp-ruby-sass）⾃动添加css前缀（gulp-autoprefixer）压缩css（gulp-clean-css）压缩js代码（gulp-uglify）压缩图⽚（gulp-imagemin）合并⽂件（gulp-concat）图⽚缓存插件（gulp-cache）编译提醒（gulp-notify）清除⽂件（del）⾃动添加版本号（gulp-rev-collector 、 gulp-rev）ES6 转 ES5 （gulp-babel、babel-preset-es2015、babel-core）注意，避免 gulp-babel 编译时出现Cannot find module '@babel/core'， gulp-babel 的版本建议安装7.0.1 ($ npm install gulp-babel@7 --save-dev)2. 配置项⽬"dependencies": {"babel-core": "^6.26.3","del": "^4.1.1","gulp": "^4.0.1","gulp-autoprefixer": "^6.1.0","gulp-cache": "^1.1.1","gulp-clean-css": "^4.2.0","gulp-concat": "^2.6.1","gulp-imagemin": "^5.0.3","gulp-jshint": "^2.1.0","gulp-notify": "^3.2.0","gulp-rename": "^1.4.0","gulp-rev": "^9.0.0","gulp-rev-append": "^0.1.8","gulp-rev-collector": "^1.3.1","gulp-ruby-sass": "^4.0.0","gulp-uglify": "^3.0.2","jshint": "^2.10.2"},"devDependencies": {"babel-preset-es2015": "^6.24.1","gulp-babel": "^7.0.1"}注意各个插件的版本号，升级后可能报错3. 引⼊插件创建⽂件 gulpfile.js:var gulp = require('gulp'),babel = require('gulp-babel'),rev = require('gulp-rev'),revCollector = require('gulp-rev-collector'),cleanCSS = require('gulp-clean-css'),autoprefixer = require('gulp-autoprefixer'),uglify = require('gulp-uglify'),imagemin = require('gulp-imagemin'),rename = require('gulp-rename'),concat = require('gulp-concat'),notify = require('gulp-notify'),cache = require('gulp-cache'),del = require('del');4. 合并、压缩css, 并添加不同浏览器的前缀gulp.task('css', function () {// 找到 src/css/ 下的所有 css ⽂件return gulp.src('src/css/**/*.css')// 添加前缀(如：-webkit-).pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))// 合并为⼀个css.pipe(concat('main.css'))// 合并后的css 保存到 dist/css 下.pipe(gulp.dest('dist/css'))// 重命名.pipe(rename({ suffix: '.min' }))// 压缩css.pipe(cleanCSS()).pipe(rev()).pipe(gulp.dest('dist/css'))//CSS ⽣成⽂件 hash 编码并⽣成 rev-manifest.json ⽂件，⾥⾯定义了⽂件名对照映射.pipe(rev.manifest()).pipe(gulp.dest('rev/css')).pipe(notify({ message: 'css ⽂件压缩完成' }));});执⾏$ gulp css后，会在 dist ⽬录下⽣成两个⽂件：main.css 和 main-e25b0dac62.min.css（其中e25b0dac62是⼀个随机的版本号）。
Windows下NodeJS环境安装配置（压缩包方式）
Windows下NodeJS环境安装配置（压缩包⽅式）Windows下NodeJS环境安装配置（压缩包⽅式）学习NodeJS开发，开发环境配置备忘，有需要的也可以参考⼀下。
⼀、下载访问官⽹，选择，Windows下⾯可以选择安装包（.msi），也可以选择压缩包（.zip）。
安装包可以⾃动配置环境变量，学习⼿动配置，我这⾥选择下载压缩包（32位、64位⾃选）。
如图：⼆、解压1. 将下载的压缩包解压到⼀个⽬录，我这⾥解压到 D:\MyDevEnvs\NodeJS ⽬录下：2. 由于nodejs的npm全局模块和缓存默认安装⽬录在C盘的⽤户⽬录⾥⾯，不想使⽤默认⽬录的，可以⼿动更改到⾃⼰想要的⽬录，我这⾥统⼀放在NodeJS⽬录⾥，这⾥新建npm（npm全局模块⽬录）和npm-cache（缓存）⽬录，稍候配置完环境变量后，在命令⾏⾥设置到这两个⽬录：三、环境变量1. 打开“Windows设置”->“系统”->“关于”->“⾼级系统设置”->“环境变量”，如图：2. 在环境变量窗⼝-系统变量，找到Path条⽬，双击即可编辑，如图：3. 在编辑环境变量窗⼝，直接点击右侧浏览按钮，将node的根⽬录，和npm⽬录（刚才创建的）选择进来，如图：四、测试环境变量按住Win+R键，打开运⾏窗⼝，输⼊cmd，打开命令⾏窗⼝，输⼊ “ node -v ” 和 “ npm -v ” 命令，显⽰node和npm对应的版本号，表⽰环境配置成功。
如图（忽略图中版本号）：五、设置npm全局模块⽬录和缓存⽬录继续在命令⾏⾥输⼊下⾯两个命令，即可设置（就是上⾯第⼆、2步创建的⽬录）：npm config set prefix "D:\MyDevEnvs\NodeJS\npm"npm config set cache "D:\MyDevEnvs\NodeJS\npm-cache"六、更改为淘宝的镜像源命令⾏输⼊以下命令即可：npm config set registry https://可⽤ “ npm config ls ” 命令查看上述配置。
前端工程师-高级WEB网站前端开发JS、CSS的合并压缩指南
本篇文章主要讨论下目前JS,CSS 合并、压缩、缓存管理存在的一些问题，然后分享下自己工程中用到的1个处理方案，并提供1个实例下载。
AD：存在的问题：合并、压缩文件主要有2方面的问题：1. 每次发布的时候需要运行一下自己写的bat文件或者其他程序把文件按照自己的配置合并和压缩。
2. 因生产环境和开发环境需要加载的文件不一样，生产环境为了需要加载合并、压缩后的文件，而开发环境为了修改、调试方便，需要加载非合并、压缩的文件，所以我们常常需要在JSP中类似与下面的判断代码：1.<c:if test="${env=='prod'}">2.<script type="text/javascript"src="/js/all.js"></script>3.</c:if>4.<c:if test="${env=='dev'}">5.<script type="text/javascript"src="/js/1.js"></script>6.<script type="text/javascript"src="/js/2.js"></script>7.<script type="text/javascript"src="/js/3.js"></script>8.</c:if>缓存问题：在现在JS满天飞的时代，大家都知道缓存能带来的巨大好处，但缓存确实非常麻烦的一个问题，相信很多人曾经历过下面的情况：为了让程序更快，在效劳器上为JS加上缓冲5天的代码，但产品更新后第二天就接到说系统出错，详细了解后就发现是缓存引起的，让用户删除缓存后就会OK。
YUI Compressor使用配置方法 JSCSS压缩工具
YUI Compressor使用配置方法JSCSS压缩工具YUI Compressor 是一个用来压缩JS 和CSS 文件的工具，采用Java开发。
YUI Compressor下载地址：/softs/25860.html使用方法：//压缩JS java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -v src.js > packed.js//压缩CSSjava -jar yuicompressor-2.4.2.jar --type css --charset utf-8 -v src.css > packed.css YUI Compressor v2.4.2 安装指南========= JDK环境变量配置的步骤如下：1.我的电脑-->属性-->高级-->环境变量. 2.配置用户变量:a.新建JA V A_HOMEC:\Program Files\Java\j2sdk1.5.0 （JDK的安装路径）b.新建PATH;%JA V A_HOME%\bin;%JA V A_H OME%\jre\binc.新建CLASSPATH%JAV A_HOME%\lib;%JAV A_HO ME%\lib\tools.jar 3.测试环境变量配置是否成功：开始-->运行--〉CMD键盘敲入：JA V AC出现相应的命令，而不是出错信息，即表示配置成功！先下载jdk：/softs/60807.html 需要安装JDK >= 1.4, 并设置环境变量JA V A_HOME桌面-> 我的电脑-> 右键-> 属性-> 高级-> 环境变量系统变量新建安装步骤：1. 安装请点击install.cmd2. 卸载请点击uninstall.cmd3. 如果安装过之前的版本，请先卸载老版本压缩测试：选中test.js, 执行右键菜单“Process with&YUICompressor”，会生成test-min.js. 注意事项：1. 需要安装JDK >= 1.4, 并设置环境变量JA V A_HOME 2. css 和js 文件编码必须是GB2312, GBK 或GB18030.如果要支持UTF-8, 请在compressor.cmd 中将GB18030替换为UTF-83. css 文件中含有中文时，如果css 编码和页面编码不一致，需要手动将中文替换为\xxxx, 详细说明请参考compressor.cmd 中的说明4. 如果不需要native2ascii, 可以只安装JRE （需要手动修改下compressor.cmd）Ref: 1. Introducing the YUI Compressor: /blog/2007/08/11/2. YUILibrary:/projects/yuicompressor/wiki3. Documentation: /yui/compressor/4. native2ascii.exe:/j2se/1.4.2/docs/tooldocs/windows/native2as cii.html以下是配置补充：使用YUI Compressor压缩JS和Css 常用示例（在cmd中执行）java -jarD:\yuicompressor-2.4.6\build\yuicompressor-2.4.6.jar --type js --charset UTF-8 D:\my.js -o D:\my-min.jsjava -jar D:\yuicompressor-2.4.6\build\yuicompressor-2.4.6.jar --type css --charset UTF-8 D:\my.css -o D:\my-min.css –type指定要打包的文件类型，可选的有js和css–charset 指定字符集-o 指定输出的文件名，如果不指定这个参数将会把压缩后的内容输出到命令行上最后的my.js和my.css是要打包的debug版源文件如果没有给定charset参数，则字符集默认是系统的，此处指定了UTF-8，更加你的实际需要修改。
node.js利用JSZIP压缩文件、文件夹，以及解压压缩文件中的文件
node.js利⽤JSZIP压缩⽂件、⽂件夹，以及解压压缩⽂件中的⽂件⼀、使⽤JSZIP包来打包⽂件或者⽂件夹1. node.js安装 jszip（已安装跳过）npm install jszip2.编写 jszip打包代码1 let fs = require("fs");//获取⽂件系统模块，负责读写⽂件2 let path = require("path");//⼯具模块，处理⽂件路径的⼩⼯具3 let JSZIP = require("jszip");4 let zip = new JSZIP();56//读取⽬录及⽂件7function readDir(obj, nowPath) {8 let files = fs.readdirSync(nowPath);//读取⽬录中的所有⽂件及⽂件夹（同步操作）9 files.forEach(function (fileName, index) {//遍历检测⽬录中的⽂件10 console.log(fileName, index);//打印当前读取的⽂件名11 let fillPath = nowPath + "/" + fileName;12 let file = fs.statSync(fillPath);//获取⼀个⽂件的属性13if (file.isDirectory()) {//如果是⽬录的话，继续查询14 let dirlist = zip.folder(fileName);//压缩对象中⽣成该⽬录15 readDir(dirlist, fillPath);//重新检索⽬录⽂件16 } else {17 obj.file(fileName, fs.readFileSync(fillPath));//压缩⽬录添加⽂件18 }19 });20 }2122//开始压缩⽂件23function startZIP() {24var currPath = __dirname;//⽂件的绝对路径当前当前js所在的绝对路径25var targetDir = path.join(currPath, "JsonMerge");26 readDir(zip, targetDir);27 zip.generateAsync({//设置压缩格式，开始打包28 type: "nodebuffer",//nodejs⽤29 compression: "DEFLATE",//压缩算法30 compressionOptions: {//压缩级别31 level: 932 }33 }).then(function (content) {34 fs.writeFileSync(currPath + "/result.zip", content, "utf-8");//将打包的内容写⼊当前⽬录下的 result.zip中35 });36 }3738 startZIP();3. H5游戏客户端⽩鹭引擎利⽤jszip 解压配置⽂件RES.getResByUrl(configURL, function (data) {let txt = new JSZIP(data).file("a.json").asText();let jsonObj = JSON.parse(txt);//转化为json对象//将配置信息存储便于运⽤}, this, RES.ResourceItem.TYPE_BIN);将jszip放在项⽬⽬录下，放在哪你⾃选，只要配置中添加路径时正确就⾏了（下图中放在了 lib⽬录下）。
Windows下使用NodeJS和npm安装UglifyJS对JavaScript进行压缩或美化
Windows下使用NodeJS和npm安装UglifyJS对JavaScript进行压缩或美化之前写过一篇Windows下安装和使用UglifyJS对JavaScript进行压缩或美化的文章，该文中使用的是Cygwin安装UglifyJS，主要问题就是安装Cygwin的时间会很长，而且安装还不一定成功。
现在NodeJS也有windows版本了，所以写了本文，我们用原生的NodeJS来运行UglifyJS。
一、下载并安装NodeJS for Windows 0.6.5 或进入NodeJS官网下载最新版本。
二、查看版本：运行cmdnode -vnpm -v如果上诉两个命令出错，请打开系统环境变量Path，直接点确定。
再试。
三、安装UglifyJS 这里我们安装最新的版本，具体版本可在npm官网查看，uglify-js版本页面。
npm install uglify-js -g然后等待命令完成，这个过程时间可能有点长。
如果出错请删除C:\Users\Administrator\AppData\Roaming\npm 内相关内容C:\Users\Administrator\AppData\Roaming\npm-cache 内相关内容C:\Users\Administrator 下的错误信息文件然后再次运行四、修改配置上述安装后自动生成的配置文件是不可直接使用的，我们需要手工去修改。
打开C:\Users\Administrator\AppData\Roaming\npm\uglifyjs.cmd 内容为：:: Created by npm, please don't edit manually."%~dp0\.\node_modules\uglify-js\bin\uglifyjs" %*修改为：:: Created by npm, please don't edit manually.@IF EXIST "%~dp0"\"node.exe" ("%~dp0"\"node.exe" "%~dp0\.\node_modules\uglify-js\bin\uglifyjs" %*) ELSE (node "%~dp0\.\node_modules\uglify-js\bin\uglifyjs" %*)五、使用uglifyjs对javascript进行压缩美化压缩：uglifyjs f.js > f.min.js美化：uglifyjs -b f.min.js > f.b.js六、总结这种使用方和之前文章的类似，但是这种方式安装的文件很小，安装起来也很快。
js的一些压缩和优化性能
js的⼀些压缩和优化性能
所选⼯具：YUI Compressor（压缩代码软件，直接在百度搜索⽤⽹页版就⾏），阿帕奇（apache）将⽂件上传到到服务器时，可通过apache将⽂件再次压缩，winSCP（⽤于在本地和服务器之间传送⽂件）
优化思路：将前端中的js和css⽂件的代码压缩在⼀⾏，尽量缩⼩空格的换⾏
1、将js或者css的代码复制到YUI Compressor中进⾏第⼀次压缩，然后在webStrom⾥⾯新建js和css⽂件然后将压缩后的内容复制到⾥⾯，并建⽴相应的html⽂件⽤于调⽤js或者css，再⽤浏览器访问
测试压缩后的css或js时，记得在每个html页⾯中加⼊以下语句：
2、通过winSCP可以连接本地和服务器：将两个test⽂件夹通过winSCP将⽂件夹上传到服务器上
上传之后，可⽤CRT连接上之后便可查看⽂件的⼤⼩
3、⾸页中js的优化：index.html页⾯中的js全都抽取出来，放在assets/js/⽬录下，然后在index.html中调⽤index.js
4、轮播加载图⽚的优化
$().ready(function () {
$("#i1").attr("src","images/ad2.jpg");
$("#i2").attr("src","images/ad3.jpg");//将⾸页中的轮播图⽚地址放在js⾥⾯，不要直接读取图⽚地址，⽽是通过js去访问图⽚的地址，当图⽚内存较⼤时或者图⽚的数量较多时，会⼤⼤提⾼加载的速度
});。
【NodeCC】nodejs版本的脚本压缩和compo工具
【NodeCC】nodejs版本的脚本压缩和compo⼯具对于前台开发⽽⾔，为了降低⽂件⼤⼩，js⽂件和css⽂件的压缩和组合⼏乎是默认的规矩。
我们利⽤YUI Compressor 和 google Compiler 可以很容易的完成⽂件的压缩。
甚⾄ yui compressor 本⾝都已经⽀持多⽂件的批量压缩。
但是，为了更好的处理这些机械化的事情，我们通常还是需要脚本来辅助，让这些⼯作可以更好的⾃动化，可配置化。
⽹上有很多类似的脚本⼯具，或者有的也已经编译成了可视化的⼯具来使⽤。
我⾃⼰以前也写过python版本的，也⽤过同事写的类似的脚本，基本也都是python版本的。
鉴于⼤多数前端的攻城师们对js更为熟悉，所以，这⾥也提供⼀个简易的nodejs 版本的。
下午花了3个⼩时写的。
NodeCC –> Node Compressor and Compoer代码很简单，基本就是读⽂件，写⽂件，调⽤系统jar命令使⽤ yuicompressor 压缩⽂件。
源码托管在：上，100⾏左右。
【编码中需要注意的⼏个地⽅】nodejs中fileSystem buffer的概念，简单的可以理解成⽂本数据流，所以，为了得到我们常见的⽂本，注意 readFile 后 toString的使⽤。
⽣成新⽂件时，路径是否存在的判断，如果不存在，⽣成指定⽬录时，由于node本⾝的mkdir不⽀持多级⽬录，所以这⾥需要⾃⼰来处理多级⽬录的递归⽣成。
有两种⽅式，⼀种是利⽤child_process 创建⼀个⼦进程调⽤系统命令 mkdir -p.另⼀种就是分析路径，⼀级⼀级递归创建⽬录。
代码参考1. /* mkdir -p for node */2. var fs = require('fs'),3. path = require('path');4.5. function mkdirpSync (pathes, mode) {6. mode = mode || 0777;7. var dirs = pathes.trim().split('/');8. if (dirs[0] == '.') {9. // ./aaa10. dirs.shift();11. }12.13. if (dirs[0] == '..') {14. // ../aaa15. dirs.splice(0, 2, dirs[0] + '/' + dirs[1]);16. }17.18. dirs.length && mkdir(dirs.shift());19. // mkdir20. function mkdir (d) {21. if (!path.existsSync(d)) {22. fs.mkdirSync(d, mode);23. }24.25. dirs.length && mkdir(d + '/' + dirs.shift());26. }27. }28.29. // eg29. // eg30. //mkdirpSync('hongru/me');通过child_process 的spawn 来调⽤系统命令，⽐如 ls， java 等。
Node.js服务器开启Gzip压缩教程
Node.js服务器开启Gzip压缩教程Gzip是什么复制⼤神们的解释吧：GZIP最早由Jean-loup Gailly和Mark Adler创建，⽤于UNIX系统的⽂件压缩。
我们在中经常会⽤到后缀为.gz的⽂件，它们就是GZIP格式的。
现今已经成为Internet 上使⽤⾮常普遍的⼀种数据压缩格式，或者说⼀种⽂件格式。
HTTP协议上的GZIP编码是⼀种⽤来改进WEB应⽤程序性能的技术。
⼤流量的WEB站点常常使⽤GZIP压缩技术来让⽤户感受更快的速度。
这⼀般是指WWW服务器中安装的⼀个功能,当有⼈来访问这个服务器中的⽹站时,服务器中的这个功能就将⽹页内容压缩后传输到来访的电脑浏览器中显⽰出来.⼀般对纯⽂本内容可压缩到原⼤⼩的40％.这样传输就快了,效果就是你点击⽹址后会很快的显⽰出来.当然这也会增加服务器的负载. ⼀般服务器中都安装有这个功能模块的.Gzip压缩率举个例⼦，通过webpack打包后的js⽂件⽐较⼤，虽然我们可以利⽤chunk功能将⽂件分开混淆打包，但是总体积还是不⼩；这时候看看利⽤gzip压缩的效果：启⽤Gzip前启⽤Gzip后对⽐其中三个⽂件前后压缩⼤⼩：⽂本类⽂件：iview.min.js: 429kb -> 109kb，压缩⽐74.6% base.min.js: 309kb -> 81.7kb，压缩⽐73.56% style.min.css: 207kb -> 30.9kb，压缩⽐85%图⽚：图⽚1: 63.2kb -> 63.2kb，压缩⽐0%？我们看到⽂本类⽂件的压缩效果⾮常显著，但是图⽚体积没变。
看⼀下⽂本类的http响应头是有gzip压缩过:⽽图⽚的没有：这是因为⼀般对于图⽚(png,jpg等)使⽤gzip的效果不好甚⾄恰得其反，所以⼀般都默认对图⽚不进⾏gzip压缩。
node.js启⽤gzip下⾯说⼀下node的express框架如何使⽤gzip:1.安装⼀个compression依赖：npm install compression2.调⽤：var compression = require('compression')var app = express();//尽量在其他中间件前使⽤compressione(compression());基本的使⽤就是这样就ok了，另外如果想只对某些请求使⽤此功能，可以使⽤它的过滤⽅法：e(compression({filter: shouldCompress}))function shouldCompress (req, res) {if (req.headers['x-no-compression']) {// 这⾥就过滤掉了请求头包含'x-no-compression'return false}return compression.filter(req, res)}其他的功能请参考compression的。
开箱即用-Grunt合并和压缩js,css文件
开箱即⽤-Grunt合并和压缩js,css⽂件js,css ⽂件合并与压缩是前端⾃动化构建⼯具，类似webpack。
它究竟有多强悍，请看它的。
这⾥只演⽰如何⽤它的⽪⽑功能：⽂件合并与压缩。
⾸先说下js,css 合并与压缩的好处：减少 HTTP 请求次数；节省带宽流量；js 压缩把代码混淆后可看性降低，带来⼀定安全性；1. 安装GruntGrunt 是运⾏在 Node.js 平台上，先要 , 然后npm install -g grunt-cli2. 使⽤Grunt两个关键的配置⽂件：Gruntfile.js 是⽤来配置和定义任务并加载Grunt插件；package.json 是 npm ⽤来配置项⽬的元数据，如配置⽂件合并与压缩依赖的插件；我们的 DEMO 项⽬Gruntfile.js 配置⽂件:'use strict';module.exports = function(grunt) {// 项⽬配置grunt.initConfig({// 加载元数据pkg: grunt.file.readJSON('package.json'),banner: '/*! <%= %> - v<%= pkg.version %> - ' +'<%= grunt.template.today("yyyy-mm-dd") %>*/\n',// 合并任务配置concat: {options: {banner: '<%= banner %>',stripBanners: true,},css: {// 源⽂件，数组，src: ['src/css/test1.css', 'src/css/test2.css'],// ⽬标⽂件, 是定义在 package.json ⽂件中的 namedest: 'dest/<%= %>.css'},js: {options: {// js ⽂件合并⽤ ';'分隔separator: ';',},src: ['src/js/test1.js', 'src/js/test2.js'],dest: 'dest/<%= %>.js'},},// 压缩 css ⽂件cssmin: {css: {src: 'dest/<%= %>.css',dest: 'dest/<%= %>-min.css'}},// 压缩 js ⽂件uglify: {js: {src: 'dest/<%= %>.js',dest: 'dest/<%= %>.min.js'},},});// These plugins provide necessary tasks.grunt.loadNpmTasks('grunt-contrib-concat');grunt.loadNpmTasks('grunt-contrib-uglify');grunt.loadNpmTasks('grunt-css');// 指定默认任务.grunt.registerTask('default', ['concat','cssmin','uglify']);};每个配置的作⽤和意义，请看上⾯的注释，应该很清晰了，注意的是任务的命名不能改： concat, cssmin,uglify, 否则不识别；package.json 配置。
css和js压缩工具TBCompressor使用方法
TBCompressor使用方法压缩css和js是我们工作中经常要处理的一件事,这里介绍的是一款基于YUICompressor封装的css和js压缩工具TBCompressor。
TBCompressor的安装很简单,点击install.cmd就可以了(在64位Win7下不能直接点击install.cmd进行安装，要先在install.cmd文件上点击右键，在弹出的菜单栏里选择以管理员身份运行就能正确安装了),安装后会在里的右键菜单里出现"Process with YUICompressor"选项。
在要压缩的JS文件或者CSS文件上点击右键，在弹出的菜单中选择Process with YUICompressor；在原文件同一目录下会生成一个已经被压缩后的文件，生成的文件名有两种命名规则：1、命名格式为filename.js或filename.css的文件压缩后生成的文件名就是“filename.min.js或filename.min.css”,比如原文件名为“test.js”，那么压缩后的文件就是“test.min.js”；2、命名格式为filename.source.js或filename.source.css的文件压缩后生成的文件名就是“filename.js或filename.css”，比如原文件名为“test.source.js”，那么压缩后的文件就是“test.js”。
TBCompressor默认压缩文件的编码类型为GB18030，如果要压缩其它编码类型的文件就修改下安装目录下的compressor.cmd文件，把里面的GB18030替换为你要的编码类型就可以了。
比如我用的是UTF8，就把GB18030改成utf-8就行了。
如果卸载点击uninstall.cmd就可以了(64位Win7在uninstall.cmd文件上点击右键，在弹出的菜单栏里选择以管理员身份运行就能卸载了)。
服务端合并和压缩JavaScript和CSS文件
服务端合并和压缩JavaScript和CSS文件Web性能优化最佳实践中最重要的一条是削减HTTP哀求，它也是YSlow 中比重最大的一条规章。
削减HTTP哀求的计划主要有合并JavaScript 和CSS文件、CSS Sprites、图像映射（Image Map）和用法Data URI 来编码。
CSS Sprites和图像映射现在已经随处可见了，但因为IE6和IE7不支持Data URI以及性能问题，这项技术尚未大量用法。
目前大部分网页中的JavaScript和CSS文件数量和开发时全都，少量的网页会按照实际状况实行本地合并，这些合并中相当多的是有挑选地手动完成，每次新的合并都需要重新在本地完成并上传到服务器，比较的任意和繁琐，同样文件的压缩也有类似的状况。
而利用服务端的合并和压缩，我们就可以根据开发的规律尽可能让文件的颗粒度变小，利用网页中URL的规章来自动实现文件的合并和压缩，这会相当的灵便和高效。
一、YUI Combo Handler 2008年7月YUI Team宣布在YAHOO! CDN上对YUI JavaScript组件提供Combo Handler服务。
Combo Handler是Yahoo!开发的一个Apache 模块，它实现了开发人员容易便利地通过URL来合并JavaScript和CSS文件，从而大大削减文件哀求数。
比如在页面上用法YUI2的Rich Text Editor组件>需要引入多个JavaScript文件，常用方式如下：而用法Combo Handler服务之后，则上述的代码可以写为：除了代码的可读性稍稍有一点点降低外，用法Combo Handler服务大大的降低了HTTP哀求数，同时也削减了URL代码量，这对于Web性能优化来讲至关重要。
所以，随后YUI从2.6.0开头，其核心组件YUI Loader内置了Combo Handling功能，即用法YUI Loader时，通过配第1页共4页。
vuecli开启js代码压缩以及代码分割
vuecli开启 js代码压缩以及代码分割
配置代码
chainWebpack: config => { config.optimization.minimize(true)// 开启压缩js代码 config.optimization.splitChunks({ // 开启代码分割 chunks: 'all' })
},
启 用 gzip压 缩 (需 要 配 置 nginx,可 以 看 出 压 缩 后 的 文 件 大 小 明 显 变 化 )
const CompressionWebpackPlugin = require('compression-webpack-plugin') chainWebpack(config) {
}
nginx 配 置
server { listen 80; server_name localhost; gzip on;
gzip_static on; gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript; gzip_proxied any; gzip_vary on; gzip_comp_level 6; gzip_buffers 16 8k; }
// 生产模式下启用gzip压缩 需要配置nginx支持gzip if (process.env.NODE_ENV === 'production') { config.plugin('CompressionWebpackPlugin').use(CompressionWepath][base].gz', algorithm: 'gzip', test: new RegExp('\\.(js|css)$'), // 只处理大于xx字节 的文件，默认：0 threshold: 10240, // 示例：一个1024b大小的文件，压缩后大小为768b，minRatio : 0.75 minRatio: 0.8, // 默认: 0.8 // 是否删除源文件，默认: false deleteOriginalAssets: false } ]) }
基于Node.js实现压缩和解压缩的方法
基于Node.js实现压缩和解压缩的⽅法压缩格式zip 和 gzip 是两种我们最常见到的压缩格式，当然，gzip 在 Windows 下很少有⼈接触。
tar 是⼀种归档格式，它默认不会压缩，需要结合 gzip 来将最终的 tar ⽂件以 gzip 格式压缩成为⼀个 tar.gz ⽂件，通常我们会缩写为 tgz。
为什么没有提到 rar？因为它是专利保护的算法，你可以免费获得解压⼯具，⽽压缩⼯具是需要付费的。
所以我们⼀般应⽤场景下，很少会提供 rar 压缩⽂件。
本⽂将分别介绍 gzip，tar，tgz 和 zip 的压缩和解压缩在 Node.js 下如何实现。
未压缩⽂件库本⽂所使⽤的未压缩⽂件库来⾃于，需要先 clone 它下来到指定⽬录。
复制代码代码如下:git clone https:///node-modules/urllib.git nodejs-compressing-demogzip在 Linux 的世界，每个⼯具的职责会很纯粹，⾮常单⼀，如 gzip，它只会对⽂件进⾏压缩，⾄于⽂件夹如何打包压缩，跟它没关系，那是 tar 要去负责的事情。
gzip 命令⾏压缩⼀个⽂件例如我们要将 nodejs-compressing-demo/lib/urllib.js ⽂件进⾏ gzip 压缩，会得到⼀个 urllib.js.gz ⽂件，源⽂件会被删除。
$ ls -l nodejs-compressing-demo/lib/urllib.js-rw-r--r-- 1 a a 31318 Feb 12 11:27 nodejs-compressing-demo/lib/urllib.js$ gzip nodejs-compressing-demo/lib/urllib.js$ ls -l nodejs-compressing-demo/lib/urllib.js.gz-rw-r--r-- 1 a a 8909 Feb 12 11:27 nodejs-compressing-demo/lib/urllib.js.gz# 还原压缩⽂件$ gunzip nodejs-compressing-demo/lib/urllib.js.gz⽂件⼤⼩从 31318 字节减少到 8909 字节，超过 3.5 倍的压缩效果。
webpack配置css代码分割和css压缩
webpack配置css代码分割和css压缩开始，按照我的webpack分模块⽂章配置好后(mini-css-extract-plugin不⽀持代码hmr热更新，所以只在⽣产模式进⾏配置)，开始下⾯的配置yarn add mini-css-extract-plugin css-minimizer-webpack-plugin配置css分离出单独的⽂件//⽂件名:webpack.prod.jsconst { merge } = require('webpack-merge');const ComConfig = require('./mon');const MiniCssExtractPlugin = require('mini-css-extract-plugin');const prodConfig = {mode: 'production',devtool: 'cheap-module-source-map',module: {rules: [{test: /\.([sc|c])ss$/,use: [MiniCssExtractPlugin.loader,'css-loader','sass-loader']}]},plugins: [new MiniCssExtractPlugin({filename: '[name].css', //直接引⼊的csschunkFilename: '[id].css', //间接引⼊的css}),]}module.exports = merge(prodConfig, ComConfig)配置css压缩//⽂件名:webpack.prod.jsconst { merge } = require('webpack-merge');const ComConfig = require('./mon');const MiniCssExtractPlugin = require('mini-css-extract-plugin');const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); //css压缩插件const prodConfig = {mode: 'production',devtool: 'cheap-module-source-map',module: {rules: [{test: /\.([sc|c])ss$/,use: [MiniCssExtractPlugin.loader,'css-loader','sass-loader']}]},plugins: [new MiniCssExtractPlugin({filename: '[name].css',chunkFilename: '[id].css',}),],optimization: {minimizer: [// For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line// `...`new CssMinimizerPlugin(),],},}module.exports = merge(prodConfig, ComConfig)如果开启了tree shaking,package.json中的sideEffects不能配置为false，需要将css⽂件加上，不然代码不⽣效,tree shaking 意思是引⼊的模块必须使⽤才会打包，css看不出来使⽤，只引⼊，所以需要将css忽略"sideEffects": ["*.css"], 总结：webpack.dev.js使⽤style-loader，webpack.prod.js使⽤MiniCssExtractPlugin.loader 代替,这个loader不⽀持热更新(hmr),开发时会耗时，所以开发环境不配置，⽣产环境配置。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Windows 7 64位系统下Node.js安装及使用
1、node.js下载地址：/download/
根据自己电脑配置下载：
2、开始安装nodejs，默认是安装在C:\Program Files\nodejs下面
3、在你任意磁盘里面自己另外新建一个文件夹，我的node.js是安装在在D盘，
所以我在D盘自己新建文件夹，名为compress
需要自行把要压缩的css、js文件拷贝到此文件夹下。
也可以在你项目里要压缩的css或js文件夹同一目录下，按下面步骤执行（不建议）
3、安装CLI
Grunt 的安装与管理都是通过 npm，npm 是 Node.js 的包管理器。
打开C:\Program Files\nodejs目录你会发现里面自带了npm,直接用
npm安装相环境既可
在全局环境中安装Grunt的命令行接口
在 cmd 中进入自己新建文件夹，输入npm install -g grunt-cli命令
如：
安装grunt-cli 并不等于安装了Grunt 任务运行器！Grunt CLI的任务是
运行gruntfil指定的Grunt版本。
这样就可以在一台电脑上同时安装多
个版本的Grunt。
等待命令运行，不要关闭，如下图：
4、新建Grunt项目（在你新建的文件夹下创建下面两个文件）
标准配置包括两个文件：
package.json :用于保存项目元数据
Gruntfile : ,用于配置或定义任务、
加载Grunt插件。
package.json
存放于项目根目录。
运行 npm install 会安装指示版本的依赖库 基于压缩js、css样式 下面配置即可：
5、运行 npm install 会根据package.jsom配置安装指示版本的依赖库
等待命令运行完，在你新建文件夹里会出现一个这样的文件：
此文件夹是nodejs相关组件的自动安装路径
6、配置Gruntfile.js 或者Gruntfile.coffee 文件(注释部分功能可按需自行选择)
7、运行grunt uglify 命令压缩 js文件，运行成功如图：
在你文件夹下会出现你自定义指定压缩后的js文件存放目录文件夹build，里面存放压缩后的js文件
运行grunt cssmin 命令压缩 css 文件，运行成功如图：
在你文件夹下会出现你自定义指定压缩后的css样式文件存放目录文件夹build2，里面存放压缩后的css样式文件
8、如有其他疑问或如需其他功能可参考grunt文档：
/configuring-tasks/。