Js,css and pictures in node. JS Compression Web Project

• Install node. js

  This is very simple, download down, configure the environment variable on it, use NODE-V to see if the installation is successful

• The modules required to install the compression are Uglify-js,clean-css,node-smushit

• The command is NPM install XXX, I installed before is not suitable for the global installation, this should not matter

• Write compressed JS (should look good to understand)

• /******* compressed 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 ');     }}// Batch words write multiple execution together can 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 ');/******* compression 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&NBSP;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 ');/******* compressed picture ******///var imgminifier = require ('.. /.. /nodejs/node_modules/node-smushit ');//imgminifier.smushit ('. /images ',  {recursive: true});  //recursive//imgminifier.smushit ('./file-src/images ');

• Perform compression

• Node Compress.js can perform compression manually

You can also write to the batch command, which is executed at the time of packaging




@echo Offecho ***********************************echo starts compressing the static resource file CD%~DP0CD. /src/main/webapp/static/compressornode Compress.jsecho End Compress static resource file echo ***********************************CD%~ DP0CD. echo ***********************************echo start packing ... call mvn clean Package-dmaven.test.skip=trueif ERRORLEVEL 1 GOTO PROCESSERRORCD Binecho Package Complete ... echo ***********************************pauseexit: Processmavenrepeaseerrorecho the Maven-release-manager plugin is not installed correctly, please update maven plugin and retry!pauseexit:processerrorecho publish failed ... Pauseexit

JSP processing, my implementation is very simple is all the JSP page introduced a taglib.jsp, the content is

<%@ 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 Add debug parameter judgment

<%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 "><%}%>

And then introduce the JS place to add the suffix parameter

<script type= "Text/javascript" src= "${ctx}/static/js/project/staff/staffedit${suffix}.js" ></script>

When publishing, use the Maven-war plugin to set the debug of Taglib to False

The project code is too lazy to change.

Js,css and pictures in node. JS Compression Web Project