热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

【NodeCC】NodeJs开发的脚本压缩和combo工具

有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载

对于Web前端的开发而言,为了降低文件大小,js文件和css文件的压缩和组合几乎是默认的规矩。

我们利用YUI Compressor 和 google Compiler 可以很容易的完成文件的压缩。 甚至 yui compressor 本身都已经支持 多文件的批量压缩。

但是,为了更好的处理这些机械化的事情,我们通常还是需要脚本来辅助,让这些工作可以更好的自动化,可配置化。

网上有很多类似的脚本工具,或者有的也已经编译成了可视化的工具来使用。

我自己以前也写过python版本的,也用过同事写的类似的脚本,基本也都是python版本的。鉴于大多数前端的攻城师们对js更为熟悉,所以,这里也提供一个简易的nodejs 版本的。下午花了3个小时写的。

NodeCC –> Node Compressor and Comboer

代码很简单,基本就是读文件,写文件,调用系统jar命令 使用 yuicompressor 压缩文件。
源码托管在:github.com/hongru/nodeCC 上,100行左右。

编码中需要注意的几个地方:

nodejs中fileSystem buffer的概念,简单的可以理解成文本数据流,所以,为了得到我们常见的文本,注意 readFile 后 toString的使用。
生成新文件时,路径是否存在的判断,如果不存在,生成指定目录时,由于node本身的mkdir不支持多级目录,所以这里需要自己来处理多级目录的递归生成。
有两种方式,一种是利用child_process 创建一个子进程调用系统命令 mkdir -p.
另一种就是分析路径,一级一级递归创建目录。代码参考 https://gist.github.com/2817910

/* mkdir -p for node */
varfs = require('fs'),
path = require('path');
  
functionmkdirpSync (pathes, mode) {
mode = mode || 0777;
vardirs = pathes.trim().split('/');
if(dirs[0] =='.') {
// ./aaa
dirs.shift();
}
  
if(dirs[0] =='..') {
// ../aaa
dirs.splice(0, 2, dirs[0] +'/'+ dirs[1]);
}
  
dirs.length && mkdir(dirs.shift());
// mkdir
functionmkdir (d) {
if(!path.existsSync(d)) {
fs.mkdirSync(d, mode);
}
  
dirs.length && mkdir(d +'/'+ dirs.shift());
}
}
  
// eg
//mkdirpSync('hongru/me');

通过child_process 的spawn 来调用系统命令,比如 ls, java 等。然后通过stdout 和 stderr 来监听获得 命令所返回的log或者error信息。

【使用方法】

当然,因为是nodejs版本的,所以自然需要安装nodejs,官方有提供详细说明
因为用了jar包 yuicompressor.jar, 所以,需要安装 JAVA的sdk,安装过程也很简单,不会的搜一下即可。
最后,关于config.json 文件的配置,很简单,都是两个字段,“source”和“target”,source代表源路径文件,target表示压缩之后生成的文件路径。
支持目录级别。
另外,如果source字段为一个数组的话,会将这个数组里面的文件按照顺序合并,然后压缩生成到指定target的路径。所以,config.json看起来会像是这个样子:

{
"css-test": {
"source":"test/css/",
"target":"test/public/css/"
},
"normal-file-compress": {
"source":"test/test.js",
"target":"test/test.min.js"
},
"normal-dir-compress": {
"source":"test/js/",
"target":"test/public/js/"
},
"compress-and-merge": {
"source": [
"test/js/a.js",
"test/js/b.js"
],
"target":"test/public/js/ab.js"
}
}

将带有 yuicompressor.jar 的tools/ ,主脚本 nodecc.js, 以及配置好的config.json 放置在同一目录下,然后执行

node nodecc.js

好了,工具很简单,代码也很简单,希望能给有需要的同学提供一点点帮助


推荐阅读
  • 微软头条实习生分享深度学习自学指南
    本文介绍了一位微软头条实习生自学深度学习的经验分享,包括学习资源推荐、重要基础知识的学习要点等。作者强调了学好Python和数学基础的重要性,并提供了一些建议。 ... [详细]
  • 在Docker中,将主机目录挂载到容器中作为volume使用时,常常会遇到文件权限问题。这是因为容器内外的UID不同所导致的。本文介绍了解决这个问题的方法,包括使用gosu和suexec工具以及在Dockerfile中配置volume的权限。通过这些方法,可以避免在使用Docker时出现无写权限的情况。 ... [详细]
  • YOLOv7基于自己的数据集从零构建模型完整训练、推理计算超详细教程
    本文介绍了关于人工智能、神经网络和深度学习的知识点,并提供了YOLOv7基于自己的数据集从零构建模型完整训练、推理计算的详细教程。文章还提到了郑州最低生活保障的话题。对于从事目标检测任务的人来说,YOLO是一个熟悉的模型。文章还提到了yolov4和yolov6的相关内容,以及选择模型的优化思路。 ... [详细]
  • 云原生边缘计算之KubeEdge简介及功能特点
    本文介绍了云原生边缘计算中的KubeEdge系统,该系统是一个开源系统,用于将容器化应用程序编排功能扩展到Edge的主机。它基于Kubernetes构建,并为网络应用程序提供基础架构支持。同时,KubeEdge具有离线模式、基于Kubernetes的节点、群集、应用程序和设备管理、资源优化等特点。此外,KubeEdge还支持跨平台工作,在私有、公共和混合云中都可以运行。同时,KubeEdge还提供数据管理和数据分析管道引擎的支持。最后,本文还介绍了KubeEdge系统生成证书的方法。 ... [详细]
  • Centos7.6安装Gitlab教程及注意事项
    本文介绍了在Centos7.6系统下安装Gitlab的详细教程,并提供了一些注意事项。教程包括查看系统版本、安装必要的软件包、配置防火墙等步骤。同时,还强调了使用阿里云服务器时的特殊配置需求,以及建议至少4GB的可用RAM来运行GitLab。 ... [详细]
  • 使用在线工具jsonschema2pojo根据json生成java对象
    本文介绍了使用在线工具jsonschema2pojo根据json生成java对象的方法。通过该工具,用户只需将json字符串复制到输入框中,即可自动将其转换成java对象。该工具还能解析列表式的json数据,并将嵌套在内层的对象也解析出来。本文以请求github的api为例,展示了使用该工具的步骤和效果。 ... [详细]
  • ZSI.generate.Wsdl2PythonError: unsupported local simpleType restriction ... [详细]
  • 推荐系统遇上深度学习(十七)详解推荐系统中的常用评测指标
    原创:石晓文小小挖掘机2018-06-18笔者是一个痴迷于挖掘数据中的价值的学习人,希望在平日的工作学习中,挖掘数据的价值, ... [详细]
  • 打开文件管理器_【教程】模组管理器3.1食用指南
    文编:byakko最近有部分小伙伴反应还不会使用unity模组管理器,现在我就给大家讲一下unity模组管理器——从下载到使用。完整视频版以下是无WiF ... [详细]
  • 安装mysqlclient失败解决办法
    本文介绍了在MAC系统中,使用django使用mysql数据库报错的解决办法。通过源码安装mysqlclient或将mysql_config添加到系统环境变量中,可以解决安装mysqlclient失败的问题。同时,还介绍了查看mysql安装路径和使配置文件生效的方法。 ... [详细]
  • Java实战之电影在线观看系统的实现
    本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
  • 开发笔记:加密&json&StringIO模块&BytesIO模块
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了加密&json&StringIO模块&BytesIO模块相关的知识,希望对你有一定的参考价值。一、加密加密 ... [详细]
  • 去掉空格的方法——Python工程师招聘标准与实践
    本文介绍了去掉空格的方法,并结合2019独角兽企业招聘Python工程师的标准与实践进行讨论。同时提供了一个转载链接,链接内容为更多相关信息。 ... [详细]
  • 无损压缩算法专题——LZSS算法实现
    本文介绍了基于无损压缩算法专题的LZSS算法实现。通过Python和C两种语言的代码实现了对任意文件的压缩和解压功能。详细介绍了LZSS算法的原理和实现过程,以及代码中的注释。 ... [详细]
  • Java String与StringBuffer的区别及其应用场景
    本文主要介绍了Java中String和StringBuffer的区别,String是不可变的,而StringBuffer是可变的。StringBuffer在进行字符串处理时不生成新的对象,内存使用上要优于String类。因此,在需要频繁对字符串进行修改的情况下,使用StringBuffer更加适合。同时,文章还介绍了String和StringBuffer的应用场景。 ... [详细]
author-avatar
tql
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有