安装node.js

这个非常简单,下载下来,配置下环境变量就可以了,使用node -v查看是否安装成功

安装压缩需要的模块分别是uglify-js,clean-css,node-smushit

命令是npm install xxx ,我之前安装都是不适于全局安装的,这个应该无所谓

编写压缩的js(应该很好看懂)

/*******压缩JS******/

var fs = require('fs');

var uglify = require("../../nodejs/node_modules/uglify-js");

function jsMinifier(fileIn, fileOut) {

if (fileIn.length > 0) {

fs.writeFileSync(fileOut, uglify.minify(fileIn).code, 'utf8');

}

}

//批量的话写多个一起执行即可

var baseCompressArray = ['../js/jquery/jquery-1.9.1.js', '../js/jquery-extend/jq-string.js',

'../js/jquery-extend/jquery.browser.js', '../js/jquery-extend/jq-excel.js',

'../js/jquery-extend/jq-form.js', '../js/jquery-extend/jq-query.js',

'../js/jquery-extend/jq-validate.js', '../js/jquery-extend/jq-project.js',

'../js/jquery-extend/jq-formatter.js',

'../js/jquery-extend/jq-dialog.js', '../js/jquery-extend/jquery.cookie.js',

'../js/easyui/jquery.easyui.min.js', '../js/jquery-extend/jq-tree.js',

'../js/layer/layer.js',

'../js/easyui/locale/easyui-lang-zh_CN.js',

'../js/easyui-extend/jquery.easyui.datagrid.extend.js'];

jsMinifier(baseCompressArray, '../js/all-in-one.min.js');

jsMinifier('../js/project/staff/staffEdit.js', '../js/project/staff/staffEdit.min.js');

jsMinifier('../js/project/staff/staffEdit_baseInfo.js', '../js/project/staff/staffEdit_baseInfo.min.js');

/*******压缩CSS******/

var cleanCSS = require('../../nodejs/node_modules/clean-css');

/**

keepSpecialComments - * for keeping all (default), 1 for keeping first one only, 0 for removing all

keepBreaks - whether to keep line breaks (default is false)

benchmark - turns on benchmarking mode measuring time spent on cleaning up (run npm run bench to see example)

root - path to resolve absolute @import rules and rebase relative URLs

relativeTo - path with which to resolve relative @import rules and URLs

processImport - whether to process @import rules

noRebase - whether to skip URLs rebasing

noAdvanced - set to true to disable advanced optimizations - selector & property merging, reduction, etc.

compatibility - Force compatibility mode to ie7 or ie8. Defaults to not set.

debug - set to true to get minification statistics under stats property (see test/custom-test.js for examples)

*/

function cssMinifier(fileIn, fileOut) {

var origCode = '', finalCode = [];

for (var i = 0; i

origCode = fs.readFileSync(fileIn[i], 'utf8');

finalCode.push(new cleanCSS({keepSpecialComments: 0}).minify(origCode));

}

fs.writeFileSync(fileOut, finalCode.join(""), 'utf8');

}

cssMinifier(['../css/easyui/black/easyui.css'], '../css/easyui/black/easyui.min.css');

cssMinifier(['../css/easyui/bootstrap/easyui.css'], '../css/easyui/bootstrap/easyui.min.css');

cssMinifier(['../css/easyui/default/easyui.css'], '../css/easyui/default/easyui.min.css');

cssMinifier(['../css/easyui/gray/easyui.css'], '../css/easyui/gray/easyui.min.css');

cssMinifier(['../css/easyui/metro/easyui.css'], '../css/easyui/metro/easyui.min.css');

cssMinifier(['../css/easyui/metro-blue/easyui.css'], '../css/easyui/metro-blue/easyui.min.css');

cssMinifier(['../css/easyui/metro-gray/easyui.css'], '../css/easyui/metro-gray/easyui.min.css');

cssMinifier(['../css/easyui/metro-green/easyui.css'], '../css/easyui/metro-green/easyui.min.css');

cssMinifier(['../css/easyui/metro-orange/easyui.css'], '../css/easyui/metro-orange/easyui.min.css');

cssMinifier(['../css/easyui/metro-red/easyui.css'], '../css/easyui/metro-red/easyui.min.css');

cssMinifier(['../css/easyui/ui-cupertino/easyui.css'], '../css/easyui/ui-cupertino/easyui.min.css');

cssMinifier(['../css/easyui/ui-dark-hive/easyui.css'], '../css/easyui/ui-dark-hive/easyui.min.css');

cssMinifier(['../css/easyui/ui-pepper-grinder/easyui.css'], '../css/easyui/ui-pepper-grinder/easyui.min.css');

cssMinifier(['../css/easyui/ui-sunny/easyui.css'], '../css/easyui/ui-sunny/easyui.min.css');

cssMinifier(['../css/easyui/icon.css', '../css/project/project_style.css'], '../css/easyui/style.min.css');

/*******压缩图片******/

//var imgMinifier = require('../../nodejs/node_modules/node-smushit');

//imgMinifier.smushit('../images', {recursive: true}); //递归

//imgMinifier.smushit('./file-src/images');

执行压缩

node compress.js 可以手动执行压缩

也可以写入到批处理命令,打包的时候执行下@echo off

echo ***********************************

echo 开始压缩静态资源文件

cd %~dp0

cd ../src/main/webapp/static/compressor

node compress.js

echo 结束压缩静态资源文件

echo ***********************************

cd %~dp0

cd ..

echo ***********************************

echo 开始打包......

call mvn clean package -Dmaven.test.skip=true

if ERRORLEVEL 1 GOTO processError

cd bin

echo 打包完成......

echo ***********************************

pause

exit

:processMavenRepeaseError

echo 未正确安装maven-release-manager插件,请更新maven插件后重试!

pause

exit

:processError

echo 发布失败......

pause

exit

jsp的处理,我的实现很简单就是所有的jsp页面引入一个taglib.jsp,内容为

import="com.sys.common.entity.search.SearchOperator,

com.sys.common.entity.domain.BaseEntityDomain,

org.joda.time.DateTime" %>

ctx: "${pageContext.request.contextPath}",

sid: "${pageContext.session.id}"

}

if (pageContext.getAttribute("jsDebug") == null

|| "false".equals(pageContext.getAttribute("jsDebug").toString())) {

%>

js_lib.jsp,css_lib.jsp加入debug参数判断

layer.config({

extend: 'extend/layer.ext.js'

});

layer.config({

extend: 'extend/layer.ext.js'

});

if (pageContext.getAttribute("cssDebug") != null

&& "true".equals(pageContext.getAttribute("cssDebug")

.toString())) {

%>

href="${ctx}/static/css/easyui//easyui.css"

id="easyuiTheme">

href="${ctx}/static/css/easyui/icon.css">

href="${ctx}/static/css/project/project_style.css">

} else {

%>

href="${ctx}/static/css/easyui//easyui.min.css"

id="easyuiTheme">

href="${ctx}/static/css/easyui/style.min.css">

然后再引入的js的地方加入suffix参数

发布的时候,利用maven-war插件将taglib的debug设置为false

项目代码懒得改了。

js和css和img,Node.js压缩web项目中的js,css和图片相关推荐

  1. Node.js压缩web项目中的js,css和图片

    2019独角兽企业重金招聘Python工程师标准>>> 安装node.js 这个非常简单,下载下来,配置下环境变量就可以了,使用node -v查看是否安装成功 安装压缩需要的模块分别 ...

  2. YUI Compressor插件压缩后war中的js/css文件未压缩的解决方法(被maven打包顶替了)

    YUI Compressor Maven插件可以压缩/合并js或css文件,经常用在Maven项目中,但最近发现在wabapp中执行了 mvn install 命令进行发布之后,终端中显示插件已经执行 ...

  3. Web项目中前端页面引用外部Js和Css的路径问题

    公众号:南宫一梦 Web项目中前端页面引用外部Js和Css的路径问题 一般我们在做Web项目时,通常会将多个页面引入的公共js和css文件抽取出来,单独写成一个公共文件,以期方便各个页面单独引入,达到 ...

  4. web项目引入PDF.js并添加水印禁止下载

    目录 web项目引入PDF.js并添加水印禁止下载 下载并引入PDF.js实现预览 动态预览PDF文件 隐藏打开.下载.打印等功能 禁止键盘组合按键下载或另存为 禁用鼠标操作 添加全局水印 PDF文件 ...

  5. 将Ext JS 5应用程序导入Web项目中

    将Ext JS 5应用程序导入Web项目中 相关资料: http://docs.sencha.com/extjs/5.1/getting_started/welcome_to_extjs.html 效 ...

  6. web项目中js加载慢问题解决思路

    web项目中js加载慢问题解决思路 参考文章: (1)web项目中js加载慢问题解决思路 (2)https://www.cnblogs.com/cslj2013/p/8491786.html 备忘一下 ...

  7. css less 不要作用到子对象_不要盲目的在项目中使用LESS CSS

    此篇文章发布于2011年,当时的想法与现在已有不同,不建议继续阅读. 如果你还不知道LESS CSS是什么东西,可以看一下这篇文章,是我一朋友写给新人看的<CSS--LESS> 不可否认, ...

  8. [css] 如何清除在项目中无用的css代码呢?

    [css] 如何清除在项目中无用的css代码呢? 1.IDE中,会对没有使用到的样式,自己进行检测,删除时候,还需要手动删除. 2.webpack中,有基于消除无用css的插件(purifycss-w ...

  9. vue-vue项目中mock.js的使用

    mock.js 官网地址:mockjs.com/ mockjs是用来模拟产生一些虚拟的数据,可以让前端在后端接口还没有开发出来时独立开发.我们可以使用真实的url,mockjs可以拦截ajax请求,返 ...

最新文章

  1. 火神山医院紧急招募IT运维志愿者需求
  2. WebSocket 的通信机制
  3. php字符串search,js获取location.search每个查询字符串的值
  4. C 多线程的互斥锁应用RAII机制
  5. 小猿圈python学习-函数的递归
  6. IPWorks V6 Sax CommStudio Fall 2005 破解
  7. vim linux python3,centos7 python3.7+vim8
  8. Mock.js数据生成器
  9. Python分词统计
  10. 李炎恢php视频教程ed2k,李炎恢PHP视频教程第一二三四季,含源码和教课文档从入门到精通...
  11. 韩天峰(Rango)推荐书目
  12. DDSM 数据集格式转换 LJPEG to PNG
  13. 基于android的汽车租赁系统app
  14. 练习HTML——简单的网页设计
  15. 《腾云-云计算和大数据时代网络技术揭秘》的收获与分享
  16. 【Linux】冯诺依曼体系结构和操作系统概念
  17. cocos做飞机大战笔记【敌机发射子弹】
  18. shell脚本获取OpenSSH版本
  19. 构建多平台Docker镜像
  20. 发布炸弹超人游戏(C语言游戏源码)

热门文章

  1. 用apxs来扩增apache的模块
  2. 基于C语言STC89C52单片机电子密码锁的设计与仿真
  3. N900 Dual boot(meego maemo)
  4. 图片滤镜算法原理简单讲解
  5. 亮剑:PHP,我的未来不是梦(3)
  6. 网管网络布线之常用兵器谱
  7. linux 空文件 sed 不能写入数据
  8. linux 安装分区设置分区大小
  9. linux c 判断字符串是否是数字
  10. docker 开机自启动