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

 更新时间:2022年12月02日 11:39:28   作者:请叫我头头哥  
这篇文章主要介绍了本地JS文件批量压缩的方法,由于之前压缩的JS文件都比较少,都是手动压缩的。这次需要压缩的文件比较多,所以用了批量压缩,特此记录一下,方便大家和自己以后再用到的时候备忘

最近在维护一个小后台项目,有段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文件开始压缩

到此这篇关于本地JS文件批量压缩的文章就介绍到这了,更多相关S文件批量压缩内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 使用Taro实现小程序商城的购物车功能模块的实例代码

    使用Taro实现小程序商城的购物车功能模块的实例代码

    这篇文章主要介绍了使用Taro实现的小程序商城的购物车功能模块,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • 解决JS请求路径控制台报错 Failed to launch'xxx' because the scheme does not have a registered handler的问题

    解决JS请求路径控制台报错 Failed to launch'xxx' because t

    这篇文章主要介绍了JS请求路径控制台报错 Failed to launch ‘xxx‘ because the scheme does not have a registered handler的问题,本文给大家分享最新完美解决方法,需要的朋友可以参考下
    2023-03-03
  • axios概念介绍和基本使用

    axios概念介绍和基本使用

    axios是一个基于Promise用于浏览器和nodejs的HTTP客户端,下面这篇文章主要给大家介绍了关于axios概念介绍和基本使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • DIV菜单层实现代码

    DIV菜单层实现代码

    昨天我问一美工jQuery怎么样了,他说简单的还可以,复杂的就不行了,我又问是哪种程度的复杂?
    2010-11-11
  • 实现局部遮罩与关闭原理及代码

    实现局部遮罩与关闭原理及代码

    实现局部遮罩,或许对某些朋友有着特殊的意义。局部遮罩的原理很简单另外加上关闭就有着另一番的效果,本文将介绍实现方法,感兴趣的朋友可以了解下,或许对你有所帮助
    2013-02-02
  • 如何基于webpack创建plugin并发布npm包

    如何基于webpack创建plugin并发布npm包

    webpack 插件是一个具有 apply 方法的 JavaScript 对象,apply 方法会被 webpack compiler 调用,并且在 整个编译生命周期都可以访问 compiler 对象,这篇文章主要介绍了基于webpack创建plugin并发布npm包,需要的朋友可以参考下
    2024-07-07
  • JS跳过debugger的几种方法小结

    JS跳过debugger的几种方法小结

    本文主要介绍了JS跳过debugger的几种方法小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • 微信小程序实现简易计算器

    微信小程序实现简易计算器

    这篇文章主要为大家详细介绍了微信小程序实现简易计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-07-07
  • 一些很实用且必用的小脚本代码

    一些很实用且必用的小脚本代码

    一些很实用且必用的小脚本代码...
    2006-08-08
  • 一个简单的js渐显(fadeIn)渐隐(fadeOut)类

    一个简单的js渐显(fadeIn)渐隐(fadeOut)类

    最近发现项目用的表单验证不好使,干脆一边参考人家的一边自己写了一个。在验证有错误返回提示信息用到渐显(fadeIn)渐隐(fadeOut)过渡(因为浏览器的效率实在太高了,一下就蹦了出来~~);
    2010-06-06

最新评论