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

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

插件安裝

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

使用方法

打開要壓縮的文件，按F1，然后輸入mini搜索找到對(duì)應(yīng)的命令來(lái)執(zhí)行壓縮

點(diǎn)擊 Minify 命令,會(huì)在當(dāng)前文件同目錄下生成 {filename}.min.{extension} 文件,該文件中就是壓縮后的內(nèi)容。

設(shè)置文件保存時(shí)自動(dòng)重新壓縮

進(jìn)入插件詳情頁(yè)面，點(diǎn)擊設(shè)置

勾選 Minify: Minify Existing On Save 選項(xiàng)

景

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

軟件介紹

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

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

幾大特性

下面是來(lái)自官網(wǎng)的相關(guān)特性介紹

可視化

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

自動(dòng)化

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

編碼識(shí)別

自動(dòng)識(shí)別文件編碼，支持UTF-8、UTF-16、UTF-32、ANSI(中文簡(jiǎn)體操作系統(tǒng)下為GB2312).

獨(dú)立使用

是獨(dú)立應(yīng)用，不依賴于編輯器，自動(dòng)壓縮功能完美支持所有編輯器.

保障穩(wěn)定

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

迷你小巧

無(wú)彈窗廣告、占用資源低、可以最小化在系統(tǒng)托盤，是你開發(fā)路上好幫手

這是一個(gè)免費(fèi)應(yīng)用，如果這個(gè)工具對(duì)大家有用可資助作者，推動(dòng)項(xiàng)目發(fā)展，畢竟免費(fèi)的良心應(yīng)用真的不多！

軟件使用

介紹完軟件的特性，下面來(lái)試一下軟件的使用：

首頁(yè)

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

自動(dòng)化

自動(dòng)化功能是讓軟件自動(dòng)幫我們壓縮項(xiàng)目的文件，只要我們?cè)O(shè)置好項(xiàng)目文件路徑和排除壓縮路徑即可

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

文件合并、手動(dòng)壓縮、Host管理、日志等

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

手機(jī)調(diào)試獨(dú)立版，需要單獨(dú)下載獨(dú)立版本

總結(jié)

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

實(shí)現(xiàn) HTML 壓縮，可以使用 JavaScript 中的正則表達(dá)式來(lái)去除 HTML 中的空格和注釋。以下是一個(gè)簡(jiǎn)單的 HTML 壓縮函數(shù)：

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

該函數(shù)首先使用正則表達(dá)式去除 HTML 中的注釋。然后，它使用另一個(gè)正則表達(dá)式去除 HTML 中的多余空格。最后，它使用另一個(gè)正則表達(dá)式去除標(biāo)簽之間的空格。

為了測(cè)試該函數(shù)，您可以創(chuàng)建一個(gè) 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);

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

或者直接在IE中測(cè)試，代碼如下：

function compressHTML(html) {
  // 去除注釋
  html = html.replace(/<!--[\s\S]*?-->/g, "");
  // 去除多余空白
  html = html.replace(/\s+/g, " ");
  // 去除標(biāo)簽之間空格
  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));

運(yùn)行效果：

在線咨詢

上一篇：前端開發(fā)之輸入框換行
下一篇：vue 鼠標(biāo)移入移出事件

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商