- 浏览: 14586 次
- 性别:
- 来自: 深圳
文章分类
最新评论
对于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
双击选中源代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/* mkdir -p for node */
var fs = require('fs'),
path = require('path');
function mkdirpSync (pathes, mode) {
mode = mode || 0777;
var dirs = 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
function mkdir (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 放置在同一目录下,然后执行
双击选中源代码
1
node nodecc.js
即可。
好了,工具很简单,代码也很简单,希望能给有需要的同学提供一点点帮助
http://www.alloyteam.com/2012/05/nodecc-version-of-nodejs-script-compression-and-compo-tools/#more-1368
我们利用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
双击选中源代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/* mkdir -p for node */
var fs = require('fs'),
path = require('path');
function mkdirpSync (pathes, mode) {
mode = mode || 0777;
var dirs = 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
function mkdir (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 放置在同一目录下,然后执行
双击选中源代码
1
node nodecc.js
即可。
好了,工具很简单,代码也很简单,希望能给有需要的同学提供一点点帮助
http://www.alloyteam.com/2012/05/nodecc-version-of-nodejs-script-compression-and-compo-tools/#more-1368
发表评论
-
How to Execute Javascript on Ajax return
2012-10-22 18:35 1126Ajax is a nice technology to de ... -
执行AJAX返回HTML片段中的JavaScript脚本
2012-10-22 18:34 832如果AJAX加载的数据是一 ... -
12种不宜使用的Javascript语法
2012-09-16 21:06 664这几天,我在读《Javascript语言精粹》。 这本书很 ... -
iFrame 跨域高度自适应问题解决
2012-09-16 21:05 897需求是:A页面(例如:www.taobao.com) 要嵌入B ... -
Self-updating scripts
2012-09-12 16:31 830Updates: Philip Tellis deployed ... -
前端相关PPT搜集
2012-09-12 16:23 1057以下为本人搜集的关于前端一些质量比较好的原创PPT,不定期更 ... -
判断浏览器是否支持指定CSS属性和指定值
2012-09-12 16:06 1594现在css3出来了, 添加了许多新特性,但由于并未全部浏览器都 ... -
完美实现溢出文本省略
2012-09-12 16:02 655文本溢出展示省略号的需求经常都会用到,而对于新式的浏览器,这完 ... -
JS跨域访问操作iframe
2012-09-12 15:57 890很多人一直都有个想法,要是可以随心所欲的操作iframe就好了 ... -
Javascript定义类(class)的三种方法
2012-09-11 09:53 863将近20年前,Javascript诞生的时候,只是一种简单的网 ... -
是时候使用JavaScript严谨模式(Strict Mode)提升团队开发效率
2012-09-10 23:00 977随着WebApp突飞猛进的发 ... -
HTML5中script的async属性异步加载JS
2012-09-10 16:59 1115HTML4.01为script标签定义了5个属性: cha ... -
前端学习资源
2012-09-03 10:15 787前端学习资源 1、http://www.javascrip ... -
一些不能订阅的前端学习资源
2012-09-03 10:14 638一些不能订阅的前端学习资源 1、http://friend ...
相关推荐
然而,原生的Seajs并不直接提供代码压缩和合并的功能,因此开发者需要借助额外的工具来实现这一目标。本篇将详细介绍一款基于Node.js的Seajs压缩部署工具,帮助你高效地完成这一任务。 首先,让我们理解一下什么是...
本指南将深入探讨NodeJS的核心概念、开发工具、模块系统、网络编程以及常见的应用实践。 一、NodeJS基础 NodeJS的核心是事件驱动、非阻塞I/O模型,这使得它在处理高并发请求时表现优秀。其单线程执行和异步编程的...
开发node.js是需要下载node.exe工具,希望对大家有用
nodejs开发实战详解部分,大概到第二章,高清,求完整版
nodejs开发指南中第五章微博开发实例,nodejs开发指南 nodejs微博 nodejs+express+mongodb 并在微博实例上增加了几个功能: 1.注册增加验证码功能 2.登录,密码连续输入错误3次 ,1个小时内不得登录 3.首页和用户...
NodeJS数据库模型建模工具源码 NodeJS数据库模型建模工具源码 NodeJS数据库模型建模工具源码 NodeJS数据库模型建模工具源码 NodeJS数据库模型建模工具源码 NodeJS数据库模型建模工具源码 NodeJS数据库模型...
基于uni-app和nodejs开发的在线学习微信小程序源码.zip 代码完整下载即用,无需修改确保可以运行。 基于uni-app和nodejs开发的在线学习微信小程序源码.zip 代码完整下载即用,无需修改确保可以运行。基于uni-app...
通过学习和研究这些脚本,开发者可以更好地理解和掌握Node.js的编程技巧,提升开发效率。 总结来说,"Scripts-NodeJS"这个资源包可能是为了教学或实践目的而创建的,包含了一系列使用Node.js编写的脚本,涉及到...
tinypng.com 可以把jpg和png文件压缩成webp,压缩比例默认为75%,这个脚本可以使用官方免费接口,每次上传20个文件,每个文件不超过5MB,循环提交,批量执行,无人值守。压缩后的文件覆盖本地同名文件,只需要执行...
aliyun-ddns自动解析域名ip支持ipv6服务器nodejs脚本linux版本 使用说明: 一、获取阿里AccessKey ID和AccessKey Secret。 二、修改config.json配置,填写AccessKey ID、AccessKey Secret、域名地址、解析类型【默认...
《node.js开发实战》,2018年1月版,忽如寄著,书中所有示例的代码
涵盖的主要内容:NodeJs的概念、应用场景、环境搭建和配置、异步编程等。多方位介绍相关场景开发实战。(2014版) 通过编写原生代码,讲解NodeJs的应用开发 适用于Nodejs初学者; javascript程序员; 想全面了解...
API接口,包含BNB转账以及Token转账
这个是把nodejs开发指南中的博客实例,使用最新的nodejs 与 express实现,完成了书中的最简单的功能。
毕业设计,基于Vue+NodeJS+Express+MongoDb开发的在线考试系统,内含NodeJS完整源代码,数据库脚本 基于Vue+Express+MongoDB在线考试系统设计毕业源码案例设计 开发工具: WebStorm 开发环境:Nodejs + vue + ...
本框架是基于nodejs express框架二次开发的,本框架包含数据库操作示例和注解。 适合nodejs入门学习或者nodejs开发人员开发中小型web项目。直接在命令窗口运行:npm start,就可启动程序!访问地址:...
本文将介绍 Nodejs 中关于 gzip deflate 压缩的两种方法:管道压缩和非管道压缩。 管道压缩 在 Nodejs 中,I/O 操作是异步的,需要通过回调函数来读取数据。当内存中无法一次装下需要处理的数据时,或者一边读取...
使用nodejs开发后端服务demo 纯后端 下载