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

Source: Internet
Author: User
Tags install node

  • 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.