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，更加你的实际需要修改。
- 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/。