整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

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));

运行效果: