`
逐行分析JS源代码
  • 浏览: 86947 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

Nodejs一键压缩合并JS/CSS/Images

阅读更多

Nodejs一键压缩合并JS/CSS/Images

 

大家好久不见,最近比较忙,这次跟大家分享的一个功能是利用Nodejs做的一键压缩合并JS/CSS/Images。

 

前言:

 



 



 

1.测试通过环境:

 

chrome v28.0.1500.71 + nodejs v0.10.18  /  firefox v14.0.1 + nodejs v0.10.18

 

2.一键压缩文件存放位置:

 

根目录下的test文件夹(你也可以指定需要压缩的根目录,可以在前端传uglifyUrl这个值),你必须把

需要压缩的Js/Css/Images分别归类归好,如下图:

 



 

当然也可以这样,如下图:


目录层级深度可以无限长,只需注意两点:

 

1.要压缩的文件必须放在test(可在前端指定)目录下;

 

2.同一个目录下,只能放同一类型的文件,比如js文件夹里只能有js文件css文件夹里只能有css文件,

图片文件夹里只能用图片类型文件(包括png/jpg/gif/jpeg…

 

 

 

 

3.此功能需要安装的node模块(压缩包解压后模块已安装好):

 

socket.io :作用为客户端和服务器端的双向实时通信;

 

uglify-js :作用为js文件的压缩;

 

clean-css :作用为css文件的压缩;

 

node-smushit :作用为图片文件的压缩;

 

walk :作用为分析磁盘的目录结构;

 

 

4.功能介绍:

 

(1)当配置好nodejs服务器后,访问一键压缩页面http://127.0.0.1:3003,会出现如下图:



 

 

(2)当把需要压缩的文件放到test根目录下后,即可点击一键压缩按钮进行压缩,如下图:

 



 



 

(3)如果压缩图片不多的话,应该不到两分钟,即可压缩完毕,如下图:



 

 

(4)此时能达到的合并压缩效果,如下图

 

 

   1.Js文件合并压缩:

 


  2.Css文件合并压缩:

 


   3. 图文文件压缩前与压缩后的容量对比:

 

 


 



  

 



5.常见错误分析:

 

 

(1) node模块安装有误,如下图

 

 

(2)压缩指定目录有误,如下图

 


 

(3)压缩的Js文件语法错误,或者压缩的目录文件夹中,存在未知的类型文件,会导致合并压缩无法进行下去,如下图:

 

 

 

6.有关IT界的其它事儿:

 

 

 

 

 

 


 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

 

 

 

 


 

 

7.最后 

 

 

 

  • 大小: 94.2 KB
  • 大小: 48 KB
  • 大小: 55 KB
  • 大小: 31.8 KB
  • 大小: 114.5 KB
  • 大小: 41.2 KB
  • 大小: 48 KB
  • 大小: 61.2 KB
  • 大小: 67.6 KB
  • 大小: 67.6 KB
  • 大小: 33.6 KB
  • 大小: 48.8 KB
  • 大小: 3.7 KB
  • 大小: 4.5 KB
  • 大小: 27.7 KB
  • 大小: 5.5 KB
  • 大小: 14.3 KB
  • 大小: 5.4 KB
  • 大小: 38.9 KB
  • 大小: 70.9 KB
  • 大小: 5.4 KB
  • 大小: 73.6 KB
  • 大小: 105.4 KB
  • 大小: 105.3 KB
  • 大小: 40.5 KB
  • 大小: 105.4 KB
  • 大小: 135.6 KB
分享到:
评论
2 楼 inier 2018-01-17  
已经安装了socket.io 2.0.4, 还提示io.configura is not a function ...          
1 楼 a1161966722 2016-10-11  
怎么运行

相关推荐

    Js/Css/Images 一键压缩功能

    Js/Css/Images 一键压缩功能,测试通过环境 chrome v28.0.1500.71 + nodejs v0.10.18 / firefox v14.0.1 + nodejs v0.10.18 压缩目录:test(你也可以指定需要压缩的根目录,可以在前端传uglifyUrl这个值),你必须...

    nodejs的http请求html/css/js

    本篇文章将深入探讨如何使用Node.js进行HTTP请求来获取并处理HTML、CSS和JavaScript资源。 一、Node.js中的HTTP模块 Node.js内置了http模块,它提供了一套API用于创建HTTP服务器和客户端。在客户端模式下,我们...

    一键升级git/nodejs/npm/Docker Engine/Docker-Compose/Python脚本

    一键升级git/nodejs/npm/Docker Engine/Docker-Compose/Python脚本。

    nodejs 一键安装包

    nodejs 一键安装包

    nodejs 解析html根据标签提取需要合并的js、css,并且更新html

    "tmp_css_json_dir": "D:\\projects\\github_project\\merge_js_css\\examples\\json\\css", //css合并中间过程文件目录 "html_dir_path": "D:\\projects\\github_project\\merge_js_css\\examples\\html" \\待...

    node下使用UglifyJS压缩合并JS文件的方法

    现在UglifyJS的最新版本为 2.8.13,主要功能为JS的压缩和合并,下面直接进入教程: 安装: <span xss=removed>npm install uglify-js -g</span> 将uglifyjs安装为全局变量,方便我们在任何地方使用。 下面是shell...

    项目合集(有nodejs/javaweb/Vue/React等等)

    vue react javaweb nodejs 微信小程序 h5小游戏 一共6种项目合集,就是怕那天电脑挂掉,U盘坏了

    NodeJs-v18.12.1-x86 Windows安装包

    Node.js 是一个开源的、跨平台的 JavaScript 运行环境,它允许开发者在服务器端运行 JavaScript 代码。Node.js 的最新稳定版本是 v18.12.1,这是一个针对 x86 架构的 Windows 版本。在这个版本中,用户可以享受到...

    LINUX安装node/nodejs

    安装npm/nodejs 二者之间的对应关系。 https://nodejs.org/zh-cn/download/releases/ 不建议自动安装(版本太老,且冲突) sudo apt -y install npm # 更新的并不是最新的。 sudo npm i npm@latest -g` sudo apt -...

    nodejs-demo

    “grunt”则是一个JavaScript任务运行器,它自动化了一系列的前端工作流程,如编译Sass、压缩JavaScript和CSS、合并文件等。在“nodejs-demo”中,Grunt可能被配置来执行这些任务,确保代码的优化和构建过程的高效性...

    使用nodejs插件UglifyJS2压缩js文件

    其中,UglifyJS2 是一个广泛使用的 Node.js 插件,专门用于压缩和混淆JavaScript代码。本文将详细介绍如何使用 UglifyJS2 来优化你的JS文件。 一、UglifyJS2 简介 UglifyJS2 是由 Marc Harter 创建的开源项目,它...

    nodejs 64位

    nodejs 64位 官网http://nodejs.cn/ https://nodejs.org/en/

    nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法

    首先使用nodejs遍历当前的文件夹: // 遍历所有的文件 var fs = require(fs) var path = require(path) var relativePath = '\\test' // 拿到需要遍历的路径 var root = path.join(__dirname)+relativePath ...

    UglifyJS 学习

    UglifyJS是基于 NodeJS 的Javascript语法解析/压缩/格式化工具,它支持任何CommonJS模块系统的Javascript平台(实现自己的CommonJS平台也非难事)。 UglifyJS通过解析重新生成JS代码的语法树,你可以通过AST以了解更...

    nodejs calls cpp

    如何在nodejs项目中调用c++动态链接库,参考nodejs文档https://nodejs.org/dist/latest-v10.x/docs/api/addons.html#addons_c_addons 和 https://github.com/nodejs/node-gyp

    nodejs 实战

    Node.js是一个JavaScript服务器,支持可伸缩的高性能Web应用。借助异步I/O,这个服务器可以同时做很多事情,能满足聊天、游戏和实时统计等应用的需求。并且既然是JavaScript,那你就可以全栈使用一种语言。 本书向...

    【nodejs】nodejs版seajs压缩部署工具

    Node.js作为一款强大的服务器端JavaScript运行环境,提供了丰富的生态系统,包括用于处理文件操作、压缩和合并等任务的模块。这款基于Node.js的Seajs压缩部署工具正是利用了这些模块,实现了Seajs模块的自动化处理。...

    Centos/Ubuntu下安装nodejs教程

    首先去nodejs官网下载https://nodejs.org/en/download/,32位或者64位自己选择,直接点右键复制链接地址(如64位:https://nodejs.org/dist/v6.10… )。 然后还是推荐自建目录 cd /home mkdir soft cd soft wget ...

    Nodejs Server+TCP+UDP_nodejs_TCP/IP_UDP_源码

    简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。本例程是基于Nodejs平台的TCP/IP通讯和UDP通讯示例

    nodejs-notes

    Node.js 官方网站 Github 官方API参考文档 维基百科 例子 可运行的Node.js示例的存储库,它超出了“你好,世界!” 下载node.js二进制文件 $ wget ...

Global site tag (gtag.js) - Google Analytics