ウェブサイト検索

UglifyJS と UglifyCSS を使用して CSS ファイルと JS ファイルを縮小する方法

Linux コマンド ラインを使用して CSS および JavaScript (JS) ファイルを縮小するには、次の 2 つの一般的なツールを利用できます: UglifyJS > JavaScript の場合は CSS の場合は UglifyCSS を使用します。

縮小化は、スペース、タブ、改行、コメントなどの機能を変更せずにソース コードから不要な文字を削除することでファイル サイズを削減し、Web アプリケーションの読み込み時間を短縮するプロセスです。

この記事では、Linux コマンド ライン インターフェイス (CLI) と UglifyJS および を使用して CSS と JS のファイルを縮小するプロセスについて説明します。 UglifyCSSツール。

ステップ 1: Linux に Node.js と NPM をインストールする

始める前に、Node.js と npm (ノード パッケージ マネージャー) が Linux システムにインストールされていることを確認してください。

node -v
npm -v

これらがインストールされていない場合は、次のコマンドを使用して Debian ベースのディストリビューションにインストールできます。

sudo apt update
sudo apt install nodejs npm -y

RHEL ベースのディストリビューションでは、以下を使用できます。

sudo dnf update
sudo dnf install nodejs npm -y

ステップ 2: UglifyJS と UglifyCSS をインストールする

Node.js と npm がインストールされたら、それらを使用して npm である UglifyJS と UglifyCSS をインストールできます。 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 ファイルを縮小するには、ファイル サイズを削減することで Web サイトのパフォーマンスを大幅に向上させることができる単純な bash スクリプトを使用できます。

複数の JavaScript ファイルの縮小

すべての JS ファイルを縮小する Bash スクリプトを作成します。

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
結論

CSS ファイルと JS ファイルの縮小は、Linux CLI で UglifyJS と UglifyCSS を使用する簡単なプロセスです。これにより、ファイル サイズが削減されるだけでなく、Web ページの読み込み時間の短縮にも役立ちます。

関連記事: