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

  • 安装压缩需要的模块分别是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

    项目代码懒得改了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值