VsCode 如何將 CSS、JS 壓縮為一行

以安裝Minify 插件，Minify 插件可以壓縮js、css和html代碼。會在指定壓縮的文件同目錄下生成{filename}.min.[css|js|html]文件，并且可以設置在文件保存時自動重新壓縮。

插件安裝

打開VSCode,按照如下所示安裝插件

使用方法

打開要壓縮的文件，按F1，然后輸入mini搜索找到對應的命令來執行壓縮

點擊 Minify 命令,會在當前文件同目錄下生成 {filename}.min.{extension} 文件,該文件中就是壓縮后的內容。

設置文件保存時自動重新壓縮

進入插件詳情頁面，點擊設置

勾選 Minify: Minify Existing On Save 選項

景

目前Web開發大致存在兩種，一種是前后端分離式單頁面應用，另一種是依賴服務器語言渲染引擎，對于第一種可能大多數情況下使用webpack等輔助工具來對項目進行打包壓縮，但是仍然有一些項目并沒有采用單頁面應用的形式，依賴于諸多靜態文件，特別是傳統項目中有很多靜態js和css沒有經過壓縮，今天就介紹一個免費前端開發的自動化工具，提供了非常強大的自動化功能，這也是筆者在需求中尋到的一個工具，讓我們一起來看看！

軟件介紹

在文章中不方便給出地址，但是給出軟件名稱——jscompress，大家可以自行搜索，一般第一個就是了，然后從官網下載下來,隨后就可以安裝打開軟件了：

JSCompress基于Yahoo.Yui.Compressor(CSS壓縮)、Google Closure Compiler(JS壓縮)、pngquant(PNG壓縮)、Scss編譯(sassc/sass2scss/libsass)，支持編譯壓縮、混淆、合并，代碼穩定有保障。

幾大特性

下面是來自官網的相關特性介紹

可視化

既然是軟件，那肯定是可視化的，擁有可視化界面，操作簡單，可以讓你輕松的壓縮、混淆、合并JS腳本/CSS樣式文件/PNG圖像文件。

自動化

獨有的文件監視功能允許你監視指定目錄，及時自動壓縮該目錄下發生變更的JS/CSS/PNG文件.(非全盤掃描，無需擔心引發資源性能問題)

編碼識別

自動識別文件編碼，支持UTF-8、UTF-16、UTF-32、ANSI(中文簡體操作系統下為GB2312).

獨立使用

是獨立應用，不依賴于編輯器，自動壓縮功能完美支持所有編輯器.

保障穩定

基于Yahoo.Yui.Compressor(CSS壓縮)、Google Closure Compiler(JS壓縮)、pngquant(PNG壓縮)、Scss編譯(sassc/sass2scss/libsass)，壓縮引擎有保障.

迷你小巧

無彈窗廣告、占用資源低、可以最小化在系統托盤，是你開發路上好幫手

這是一個免費應用，如果這個工具對大家有用可資助作者，推動項目發展，畢竟免費的良心應用真的不多！

軟件使用

介紹完軟件的特性，下面來試一下軟件的使用：

首頁

首頁分為兩大塊，分別是統計信息和開發輔助部分，統計部分是對過往文件（js、css、png、scss）文件的壓縮或者編譯信息，輔助工具包括屏幕取色、JS/JSON格式化、IIS文件映射、Base64/文本、圖片轉Base64、二維碼生成，基本上都是開發中常用到的功能。

自動化

自動化功能是讓軟件自動幫我們壓縮項目的文件，只要我們設置好項目文件路徑和排除壓縮路徑即可

設置文件夾路徑以及針對不同文件的設置，包括js壓縮后的版本等

文件合并、手動壓縮、Host管理、日志等

后面功能就不在詳細演示了，如果需要的可以自行嘗試

手機調試獨立版，需要單獨下載獨立版本

總結

有這樣一個工具，對傳統項目或者對webpack等前端輔助工具不熟悉的人來說非常有用，可視化的操作可以說非常人性化了，如果你的資源文件比較多而且用不好一系列的打包工具，不妨試試JSCompress，希望對你有所幫助！

實現 HTML 壓縮，可以使用 JavaScript 中的正則表達式來去除 HTML 中的空格和注釋。以下是一個簡單的 HTML 壓縮函數：

function compressHTML(html) {
  // 去除注釋
  html = html.replace(/<!--[\s\S]*?-->/g, "");
  // 去除多余空白
  html = html.replace(/\s+/g, " ");
  // 去除標簽之間空格
  html = html.replace(/>\s+</g, "><");
  return html.trim();
}

該函數首先使用正則表達式去除 HTML 中的注釋。然后，它使用另一個正則表達式去除 HTML 中的多余空格。最后，它使用另一個正則表達式去除標簽之間的空格。

為了測試該函數，您可以創建一個 HTML 文件，并在其中添加一些冗余的空格和注釋。例如：

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    <!-- This is a comment -->
    <h1> Welcome to my website! </h1>
    <p> This is some text. </p>
  </body>
</html>

然后，您可以在Node.JS中使用以下代碼將 HTML 文件加載為字符串并壓縮它：

// 加載 HTML 文件
const fs = require("fs");
const html = fs.readFileSync("index.html", "utf8");
// 壓縮 HTML
const compressedHtml = compressHTML(html);
console.log(compressedHtml);

輸出是一個壓縮后的 HTML 字符串，其中不包含注釋或冗余空格。

或者直接在IE中測試，代碼如下：

function compressHTML(html) {
  // 去除注釋
  html = html.replace(/<!--[\s\S]*?-->/g, "");
  // 去除多余空白
  html = html.replace(/\s+/g, " ");
  // 去除標簽之間空格
  html = html.replace(/>\s+</g, "><");
  return html.trim();
}
var html =`
<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    <!-- This is a comment -->
    <h1> Welcome to my website! </h1>
    <p> This is some text. </p>
  </body>
</html>
`;
console.log(compressHTML(html));

運行效果：

在線咨詢

上一篇：前端開發之輸入框換行
下一篇：vue 鼠標移入移出事件

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

VsCode 如何將 CSS、JS 壓縮為一行