-
安装压缩需要的模块分别是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 < fileIn.length; 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,内容为
<%@ page language="java" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" import="com.sys.common.entity.search.SearchOperator, com.sys.common.entity.domain.BaseEntityDomain, org.joda.time.DateTime" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script type="text/javascript">var App = { ctx: "${pageContext.request.contextPath}", sid: "${pageContext.session.id}" }</script> <c:set var="ctx" value="${pageContext.request.contextPath}"/> <c:set var="cssDebug" value="true"/> <c:set var="jsDebug" value="true"/> <% if (pageContext.getAttribute("jsDebug") == null || "false".equals(pageContext.getAttribute("jsDebug").toString())) { %><c:set var="suffix" value=".min"/><%}%>
js_lib.jsp,css_lib.jsp加入debug参数判断
<%if(pageContext.getAttribute("jsDebug")!=null && "true".equals(pageContext.getAttribute("jsDebug").toString())){%> <!-- base --> <script type="text/javascript" src="${ctx}/static/js/jquery/jquery-1.9.1.js"></script> <script type="text/javascript" src="${ctx}/static/js/jquery-extend/jq-string.js"></script> <script type="text/javascript" src="${ctx}/static/js/jquery-extend/jquery.browser.js"></script> <script type="text/javascript" src="${ctx}/static/js/jquery-extend/jq-form.js"></script> <script type="text/javascript" src="${ctx}/static/js/jquery-extend/jq-query.js"></script> <script type="text/javascript" src="${ctx}/static/js/jquery-extend/jq-excel.js"></script> <script type="text/javascript" src="${ctx}/static/js/jquery-extend/jq-validate.js"></script> <script type="text/javascript" src="${ctx}/static/js/jquery-extend/jq-project.js"></script> <script type="text/javascript" src="${ctx}/static/js/jquery-extend/jq-dialog.js"></script> <script type="text/javascript" src="${ctx}/static/js/jquery-extend/jq-formatter.js"></script> <script type="text/javascript" src="${ctx}/static/js/jquery-extend/jquery.cookie.js"></script> <script type="text/javascript" src="${ctx}/static/js/easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="${ctx}/static/js/easyui-extend/jquery.easyui.datagrid.extend.js"></script> <script type="text/javascript" src="${ctx}/static/js/jquery-extend/jq-tree.js"></script> <script type="text/javascript" src="${ctx}/static/js/easyui/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript" src="${ctx}/static/js/layer/layer.js"></script> <script type="text/javascript"> layer.config({ extend: 'extend/layer.ext.js' }); </script> <%}else{%> <script type="text/javascript" src="${ctx}/static/js/all-in-one.min.js"></script> <script type="text/javascript" src="${ctx}/static/js/layer/layer.js"></script> <script type="text/javascript"> layer.config({ extend: 'extend/layer.ext.js' }); </script> <%}%>
<% if (pageContext.getAttribute("cssDebug") != null && "true".equals(pageContext.getAttribute("cssDebug") .toString())) { %> <link rel="stylesheet" type="text/css" href="${ctx}/static/css/easyui/<%=UserInfo.getCurrentUser().getTheme()%>/easyui.css" id="easyuiTheme"> <link rel="stylesheet" type="text/css" href="${ctx}/static/css/easyui/icon.css"> <link rel="stylesheet" type="text/css" href="${ctx}/static/css/project/project_style.css"> <% } else { %> <link rel="stylesheet" type="text/css" href="${ctx}/static/css/easyui/<%=UserInfo.getCurrentUser().getTheme()%>/easyui.min.css" id="easyuiTheme"> <link rel="stylesheet" type="text/css" href="${ctx}/static/css/easyui/style.min.css"> <%}%>
然后再引入的js的地方加入suffix参数
<script type="text/javascript" src="${ctx}/static/js/project/staff/staffEdit${suffix}.js"></script>
发布的时候,利用maven-war插件将taglib的debug设置为false
项目代码懒得改了。
-
Node.js压缩web项目中的js,css和图片
最新推荐文章于 2023-08-11 13:05:39 发布