Node.js壓縮web項目中的js,css和圖片

• 安裝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 < 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

項目代碼懶得改了。