如何使用 UglifyJS 和 UglifyCSS 缩小 CSS 和 JS 文件

在基于 RHEL 的发行版上，您可以使用：

sudo dnf update
sudo dnf install nodejs npm -y

第2步：安装UglifyJS和UglifyCSS

一旦安装了Node.js和npm，您就可以使用它们来安装UglifyJS和UglifyCSS，它们都是npm分别用于缩小 JavaScript 和 CSS 文件的包。

sudo npm install -g uglify-js
sudo npm install -g uglifycss

安装后，通过运行以下命令检查 UglifyJS 和 UglifyCSS 是否安装正确：

uglifyjs -V
uglifycss -V

第 3 步：缩小 JavaScript 和 CSS 文件

要缩小 JavaScript 或 CSS 文件，请通过运行以下命令导航到包含要缩小的文件的目录：

uglifyjs yourfile.js -o yourfile.min.js
uglifycss yourfile.css > yourfile.min.css

要缩小目录中的多个 CSS 和 JS 文件，您可以使用一个简单的 bash 脚本，该脚本可以通过减小文件大小来显着提高网站的性能。

缩小多个 JavaScript 文件

创建一个 Bash 脚本来缩小所有 JS 文件。

nano minify_js.sh

将以下脚本添加到 minify_js.sh 文件中。

#!/bin/bash
for file in *.js; do
  if [ "$file" != "${file%.min.js}" ]; then
    echo "Skipping minified file: $file"
    continue
  fi
  uglifyjs "$file" -o "${file%.js}.min.js" --compress --mangle
  echo "Minified $file to ${file%.js}.min.js"
done

使脚本可执行并运行它。

chmod +x minify_js.sh
./minify_js.sh

该脚本将循环遍历目录中的所有 .js 文件，使用 UglifyJS 缩小它们，并创建带有 .min.js 扩展名的新文件。

如果您不想创建新文件，可以在 bash 脚本中使用 -o 选项覆盖原始文件。

#!/bin/bash
for file in *.js; do
  if [ "$file" != "${file%.min.js}" ]; then
    echo "Skipping already minified file: $file"
    continue
  fi
  uglifyjs "$file" --compress --mangle -o "$file"
  echo "Minified $file"
done

缩小多个 CSS 文件

同样，要缩小目录中的所有 CSS 文件，请创建一个 Bash 脚本。

nano minify_css.sh

将以下脚本添加到 minify_css.sh 文件中：

#!/bin/bash
for file in *.css; do
  if [ "$file" != "${file%.min.css}" ]; then
    echo "Skipping minified file: $file"
    continue
  fi
  uglifycss "$file" > "${file%.css}.min.css"
  echo "Minified $file to ${file%.css}.min.css"
done

使脚本可执行并运行它。

chmod +x minify_css.sh
./minify_css.sh

该脚本将循环遍历目录中的所有 .css 文件，使用 UglifyCSS 缩小它们，并创建扩展名为 .min.css 的新文件。

如果您不想创建新文件，可以使用以下bash脚本覆盖原始文件。

#!/bin/bash
for file in *.css; do
  if [ "$file" != "${file%.min.css}" ]; then
    echo "Skipping already minified file: $file"
    continue
  fi
  uglifycss "$file" > temp.css
  mv temp.css "$file"
  echo "Minified $file"
done

结论

在 Linux CLI 上使用 UglifyJS 和 UglifyCSS 缩小 CSS 和 JS 文件是一个简单的过程。这不仅可以减小文件大小，还有助于缩短网页的加载时间。