热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

本地JS文件批量压缩的操作方法

最近在维护一个小后台项目,有段JS需要压缩上传到CDN存储服务器。由于之前压缩的JS文件都比较少,都是手动压缩的。这次需要压缩的文件比较多,所以用了批量压缩。特此记录一下,方便大家和自己以后再用到的时候备忘。准备工作安装nodejs首先在本地安装node.js和npm

最近在维护一个小后台项目,有段JS需要压缩上传到CDN存储服务器。由于之前压缩的JS文件都比较少,都是手动压缩的。这次需要压缩的文件比较多,所以用了批量压缩。特此记录一下,方便大家和自己以后再用到的时候备忘。

准备工作

安装nodejs

首先在本地安装node.js和npm,一般npm集成于nodejs,即安装nodejs,同时也安装了npm。node.js下载地址,下载以后直接不停下一步就行,全部使用默认选项即可。下载完成后打开CMD,node -v检测是否安装成功,安装成功则会显示nodejs版本号。

安装uglify插件

在cmd命令行执行:npm install uglify-js -g

开始压缩

压缩的时候将下面的代码拷贝下来,然后生成bat文件,再运行bat文件(有些电脑可能需要windows管理员身份运行),然后依次输入当前的JS文件目录。再输入生成输出压缩后JS的目录即可。

@ECHO OFF
setlocal enabledelayedexpansion
set source_path=%1
set target_dir=%2

IF [%1]==[] ( 
      rem echo please input Javascript file or directory 
      set /p  source_path=please input Javascript file or directory:
)

IF [%2]==[] ( 
      rem echo please input output directory 
      set /p target_dir=please input output directory:
) 
rem source path exists?
FOR %%i IN (%source_path%) DO SET FileAttrib=%%~ai

if "%FileAttrib%" equ ""   (     
      rem not found file attribute, source path not exist
      echo source path ^(%source_path%^) doesn't exist
      exit /b 0
)   ELSE   IF "%FileAttrib:~0,1%" equ "d" (
      rem source path is directory and not end with \, append \ to source path
      IF %source_path:~-1% neq \ (
            set source_path=%source_path%\
      )   
) 
echo source path is  %source_path%  

rem target path exists?
FOR %%i IN (%target_dir%) DO SET fa=%%~ai

IF   [%fa%]==[]   (
    rem target path not exist, make it
    mkdir %target_dir%
      
)  

IF %target_dir:~-1% neq \ (
      rem append \ to target path
      set target_dir=%target_dir%\
)
   
echo target path is %target_dir% 

IF [%FileAttrib:~0,1%]==[d] (
 
    for /r %source_path% %%I in (*.js) do ( 

      set file_name=%%~nI
      set parent=%%~dpI
      set target_parent=%target_dir%!parent:%source_path%=!
      if not exist !target_parent!  mkdir !target_parent!
      cd !target_parent!

      if [!file_name:~-4!] neq [.min] (      

            set w= uglifyjs %%I -m -c -O ascii_Only=true -o   !target_parent!%%~nI.min.js 
            rem uglify .js file
            echo uglifyjs from "%%I" to "!target_parent!%%~nI.min.js"
            start cmd /c  "!w!"
      )  else (
           rem copy min.js file
           echo copy file from "%%~dpnI.js" to "!target_parent!%%~nI.js" 
           start cmd /c "copy  %%~dpnI.js  !target_parent!%%~nI.js" 
      )
       
    )
) else (
    for %%I in (%source_path%) do (
        IF    "%%~xI" EQU ".js"  (    
             set file_name=%%~nI
              if [!file_name:~-4!] neq [.min] (   
                  rem uglify .js file
                  set val=%target_dir%%%~nI.min.js       
                  echo uglifyjs from "%%I" to "!val!"
                  start cmd /c "uglifyjs  %%I  -m -c  -O ascii_Only=true -o   !val!"
                  
              ) else (
                  rem copy min.js file
                  echo copy file from "%%I" to "%target_dir%%%~nI.js"
                  start cmd /c "copy  %%I %target_dir%%%~nI.js"  
              )
        
        )
    )
      
)
echo done

源码地址

https://github.com/toutouge/javademosecond/tree/master/hellolearn

补充:JS压缩方法及批量压缩

压缩JS的好处(1)减小文件的体积;
(2)减小网络传输量和带宽占用;
(3)减小服务器的处理的压力;
(4)提高页面的渲染显示的速度。安装uglify插件

# 执行命令: 
npm install uglify-js -g

单文件压缩

# 使用方法:uglifyjs + 要压缩的js文件名称 +  -o +  压缩后js文件名称
uglifyjs vendor.js -o vendor.min.js

压缩后文件体积明显变小!!!

本地JS文件批量压缩的操作方法

批量压缩方法

(1)新建txt文件,内容如下

@echo off
:: 设置压缩JS文件的根目录,脚本会自动按树层次查找和压缩所有的JS(注意路劲中不能有空格)
SET JSFOLDER=D:\uglifyDestination
echo 正在查找JS文件
chdir /d %JSFOLDER%
for /r . %%a in (*.js) do (
    @echo 正在压缩 %%~a ...
    uglifyjs %%~fa  -m -o %%~fa
)
echo 完成!
pause & exit

(2)修改文件为.bat文件
(3)将需要压缩的js文件放置指定目录(例:D:\uglifyDestination)
(4)双击bat文件开始压缩

原文地址:https://www.cnblogs.com/toutou/p/js_min.html

推荐阅读
  • 了解如何快速搭建属于自己的个人博客,无需编程基础,适合Mac和Windows用户。通过本文,您将学会使用GitHub Pages和Hexo构建一个完全自主的在线空间。 ... [详细]
  • 全能终端工具推荐:高效、免费、易用
    介绍一款备受好评的全能型终端工具——MobaXterm,它不仅功能强大,而且完全免费,适合各类用户使用。 ... [详细]
  • 本文探讨了如何在Node.js环境中,通过Tor网络使用的SOCKS5代理执行HTTP请求。文中不仅提供了基础的实现方法,还介绍了几种常用的库和工具,帮助开发者解决遇到的问题。 ... [详细]
  • Node.js 开发入门:环境搭建与配置
    随着Node.js技术的日益成熟及其即将发布的1.0稳定版,越来越多的开发者开始关注并尝试这一高性能的服务器端JavaScript平台。本文将引导读者如何在Windows环境下安装配置Node.js,并介绍一些常用的开发工具和框架。 ... [详细]
  • 当unique验证运到图片上传时
    2019独角兽企业重金招聘Python工程师标准model:public$imageFile;publicfunctionrules(){return[[[na ... [详细]
  • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
  • Spring Cloud学习指南:深入理解微服务架构
    本文介绍了微服务架构的基本概念及其在Spring Cloud中的实现。讨论了微服务架构的主要优势,如简化开发和维护、快速启动、灵活的技术栈选择以及按需扩展的能力。同时,也探讨了微服务架构面临的挑战,包括较高的运维要求、分布式系统的复杂性、接口调整的成本等问题。最后,文章提出了实施微服务时应遵循的设计原则。 ... [详细]
  • 在Java应用程序开发过程中,FTP协议被广泛用于文件的上传和下载操作。本文通过Jakarta Commons Net库中的FTPClient类,详细介绍如何实现文件的上传和下载功能。 ... [详细]
  • LCUI 2.1.0 版本现已推出,这是一个用 C 语言编写的图形用户界面开发库,适合创建轻量级的桌面应用程序。此次更新包括多项修复和功能增强,并正式宣布将启动 Android 支持的开发计划。 ... [详细]
  • 在树莓派Ubuntu(ARM64)上安装Node.js
    本文详细介绍了如何在树莓派Ubuntu系统(ARM64架构)上安装Node.js,包括下载、解压、移动文件以及创建软链接等步骤。 ... [详细]
  • Node.js 入门指南(一)
    本文介绍了Node.js的安装步骤、如何创建第一个应用程序、NPM的基本使用以及处理回调函数的方法。通过实际操作示例,帮助初学者快速掌握Node.js的基础知识。 ... [详细]
  • Node.js 中 GET 和 POST 请求的数据处理
    本文详细介绍了如何在 Node.js 中使用 GET 和 POST 方法来处理客户端发送的数据。通过示例代码展示了如何解析 URL 参数和表单数据,并提供了完整的实现步骤。 ... [详细]
  • 本文探讨了前端包管理器的核心功能,包括注册机制、文件存储、上传下载、以及依赖分析等关键特性,并介绍了几种流行的前端包管理工具。 ... [详细]
  • MQTT协议:轻量级消息传输的基石
    MQTT(Message Queuing Telemetry Transport,消息队列遥测传输)是一种基于发布/订阅模式的轻量级通信协议,适用于低带宽、高延迟或不可靠的网络环境。该协议基于TCP/IP构建,由IBM在1999年首次推出,旨在通过最小化网络流量和代码量,为远程设备提供高效、可靠的消息传输服务。 ... [详细]
  • 利用NVM实现Node.js多版本管理
    本文详细介绍如何使用NVM(Node Version Manager)进行Node.js的多版本管理,包括安装配置、版本切换等操作。 ... [详细]
author-avatar
奔跑的人儿
很傲娇的做一个家伙!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有