nodejs压缩css及js工具

1. 安装nodejs

2. 安装cssmin。 npm install cssmin -g

3. 安装yuicompressor。npm install yuicompressor -g

4. 设置NODE_PATH到全局C:\Users\Administrator\AppData\Roaming\npm\node_modules (默认nodejs全局目录)

5. 创建source目录,创建dist目录

6. 创建compress.js

var fs = require(‘fs‘);
var cssmin = require(‘cssmin‘);
var compressor = require(‘yuicompressor‘);

var sourceDir = "source";
var distDir = "dist";
var fileNames = fs.readdirSync(sourceDir);
var fileIndex = 0;	

compressFile(fileNames[fileIndex]);

function compressFile(fileName){
	if(fileName==null){
		return;
	}

	var sourceFileName = fileName;
	var sourceFilePath = sourceDir+"/"+sourceFileName;

	var suffix = getSuffix(fileName);

	if(suffix=="css"){
		compressCssFile(fileName);
		return;
	}else if(suffix=="js"){
		compressJsFile(fileName);
		return
	}
	compressFile(fileNames[++fileIndex]);

}

function compressCssFile(fileName){
	var sourceFileName = fileName;
	var sourceFilePath = sourceDir+"/"+sourceFileName;

	var compressedFileName = sourceFileName.replace(".css","")+".min.css";
	var compressedFilePath = distDir+"/"+sourceFileName;

	var css = fs.readFileSync(sourceFilePath, encoding=‘utf8‘);
	var min = cssmin(css);
	fs.writeFile(compressedFilePath,min,function(err){
		if(err==null){
			console.log("compress file["+sourceFileName+"] to file["+compressedFileName+"] successfully ...");
			compressFile(fileNames[++fileIndex]);
		}else{
			console.log("encounter error : "+err);
		}
	});
}

function compressJsFile(fileName){

	var sourceFileName = fileName;
	var sourceFilePath = sourceDir+"/"+sourceFileName;

	var compressedFileName = sourceFileName.replace(".js","")+".min.js";
	var compressedFilePath = distDir+"/"+compressedFileName;

	compressor.compress(sourceFilePath, {
		charset: ‘utf8‘,
		type: ‘js‘,
		nomunge: true,
		‘line-break‘: 80
	}, function(err, data, extra) {

		fs.writeFile(compressedFilePath,data,function(err){
			if(err==null){
				console.log("compress file["+sourceFileName+"] to file["+compressedFileName+"] successfully ...");
				compressFile(fileNames[++fileIndex]);
			}else{
				console.log("encounter error : "+err);
			}
		});

	});
}

function getSuffix(fileName){
	var index = fileName.lastIndexOf(".");
	return fileName.substring(index+1);
}	

7. 将要要所的文件放入source目录,执行compress.js(命令node compress),将文件压缩至dist目录。

时间: 2024-10-06 04:53:29

nodejs压缩css及js工具的相关文章

maven 关于构建版本号,以及在构建的时候压缩css,js并为这些文件追加版本号

最近负责公司一个项目框架的搭建,由于我们这边是后端团队,没有专业的前端工程师支持我们,我就在这个搭建过程中遇到了一些前端问题,给大家分享一下. 主要分享点: 构建项目时自动在css,js文件名中加入版本号     解决新上线版本时,浏览器可以更新缓存 构建项目自动压缩css,js资源文件     加快响应速度 解决第一个问题,是在构建的时候必须生成一个构建版本号,比如构建时刻的timestamp,正好在网上看到这样的插件,配置信息如下 <plugin> <groupId>org.c

【转载】Yui.Compressor高性能ASP.NET开发:自动压缩CSS、JS

在开发中编写的js.css发布的时候,往往需要进行压缩,以减少文件大小,减轻服务器的负担.这就得每次发版本的时候,对js.js进行压缩,然后再发布.有没有什么办法,让代码到了服务器上边,它自己进行压缩呢? 有两种办法: 第一种,在css.js请求到来的时候读取一下相对应的文件,进行压缩后返回.此方法可以通过在Global.asax的Application_BeginRequest的事件中,进行处理,也可以在web.config中注册一个httpHandler进行处理. 第二种是在程序启动的时候,

合并压缩css和Js的方式

[文章作者:磨延城 转载请注明原文出处: https://mo2g.com/view/74/] 本篇博客从减少浏览器加载外部资源连接数的思考角度着手,要想深入了解其他加快网页显示速度的原理,估计又得花不少时间,这需要把前端跟后端都说解释清楚.有时间我会分开写其他部分的内容.这里为了节省时间,只介绍如何减少网页需要加载的外部资源,加快浏览器的响应速度. 本篇博客从减少浏览器加载外部资源连接数的思考角度着手,要想深入了解其他加快网页显示速度的原理,估计又得花不少时间,这需要把前端跟后端都说解释清楚.

grunt——合并压缩css和js

npm文档:www.npmjs.com [GruntFile.js] module.exports = function(grunt) { grunt.initConfig({ timestamp:'<%= grunt.template.today("yyyymmddHHMM") %>', jspath:'app/js/', csspath:'app/css/', concat: { js:{ options: { separator: ';' }, src: [ &quo

grunt打包压缩css、js方法

1.安装nodejs,如已安装请忽略 2.安装grunt,npm install grunt 3.配置package.json和gruntfile.js文件,详解请见 想合并整个文件夹的文件请安装grunt-contrib-concat, 想压缩某个文件请安装grunt-contrib-cssmin http://learningtogrow.blog.51cto.com/3076238/1909487 http://learningtogrow.blog.51cto.com/3076238/1

关于webStrom-11.1配置less且自动生成.css和自动压缩为.min.css/.min.js

网上看过很多配置思路,自己总结了以下, 就把我个人配置的顺序以及材料分享下,webstrom以下简称WB 1.配置less需要安装nodejs,自行安装.因为要用到npm.我是直接把npm解压到C盘根目录的,先下载解压好待用 npm解压包百度云下载地址:http://pan.baidu.com/s/1bpdnmGZ (yuicompressor-2.4.2.jar 这个是WB配置让CSS或者JS自动生成.mincss/.minjs的压缩工具,不是配置LESS的工具哦, 使用很简单不用解压,比我直

Django 的css和js压缩插件:django_compressor

今天尝试了django_conpressor,一个在django框架中压缩css和js的插件,灰常有用 我把它加载在我的base的HTML template中,原来未经压缩的css和js是: <link rel="stylesheet" href = "include/style.css" type="text/css"> <link rel="stylesheet" href = "include

使用gulp自动化打包合并前端静态资源(CSS、JS文件压缩、添加版本号)

现在正在做的项目更新迭代比较频繁,会经常对前端代码打包部署,手动整合代码文件很麻烦并且浪费时间,所以决定使用gulp来代替手工完成这项工作. 前端静态资源在发版更新时会面临客户端浏览器缓存的问题(可参考这篇文章),解决这个问题可以采用两类方法:覆盖方法(引用资源时加版本号,不修改资源文件名).非覆盖方法(修改资源文件名),本篇文章主要采用的是第一种加版本号的方式,主要用gulp给静态资源自动加版本号和压缩CSS.JS. 原理:通过对JS,CSS文件内容进行Hash运算,生成一个文件的唯一Hash

配置grunt进行css、js的检查、合并和压缩

现在会进行代码的合并和压缩已成为前端人员的必备知识,那么现在来介绍一个grunt的工具.grunt是个风靡世界的工具,它的首页是  http://www.gruntjs.net 这是个中文网站,有文档可以参考.但是只看文档是不是觉得很蛋疼呢?一个字:看不太懂啊! 好了,废话不多说,直接发安装步骤和注意事项,都是心酸研究出来的啊... 这里介绍mac的安装方法.windows方法相类似,等我稍微研究一下后再发上来 首先,要安装nodejs,grunt是依赖node滴.上 www.nodejs.or