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

时间:2022-12-02 请叫我头头哥人气:0

最近在维护一个小后台项目，有段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

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

批量压缩方法

（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文件开始压缩

加载全部内容