IDEA配置 File Watcher CSS压缩及Less格式转换

如有需要，请于文章顶部下载资源

CSS压缩配置信息

名称：CSS Compressor（CSS 压缩器）

• 用途：压缩 CSS 文件，减小文件大小，提高网站加载速度。
• 优点：压缩后的 CSS 文件体积更小，可以使网页加载更快。
• 缺点：压缩后的文件难以阅读和维护。

文件类型：级联样式表（Cascading Style Sheets，缩写为 CSS）

• 用途：网页设计中用来控制网页的外观和排版。
• 优点：可以有效地分离网页的内容和表现，使网页变得更加易于维护和修改。

范围：所有位置

• 用途：可以在任何位置调用 CSS 压缩器。

程序：java

• 用途：CSS 压缩器的程序语言为 Java。

参数：-jar “F:\JetBrains\IntelliJ IDEA 2022.1.3\plugins\yuicompressor-2.4.8.jar” --type css --charset utf-8 $FilePath$ -o $FileNameWithoutExtension$.min.css

• 用途：指定 CSS 压缩器的参数，如压缩器的程序路径、压缩类型、字符编码等。
• 参数含义：
  • -jar “F:\JetBrains\IntelliJ IDEA 2022.1.3\plugins\yuicompressor-2.4.8.jar”：指定压缩器的程序路径。
  • –type css：指定压缩类型为 CSS。
  • –charset utf-8：指定字符编码为 UTF-8。
  • $FilePath$：指定要压缩的 CSS 文件路径。
  • -o $FileNameWithoutExtension$.min.css：指定输出路径和文件名，其中 $FileNameWithoutExtension$ 表示去除文件扩展名后的文件名。

要刷新的输出路径：$FileDir$/$FileNameWithoutExtension$.min.css

• 用途：指定压缩后的文件输出路径，其中 $FileDir$ 表示文件所在目录。

Less转换为CSS的配置信息

名称：Less  // Less编译器的名称
文件类型：Less  // Less的文件类型为Less
范围：所有位置  // 可以在任何位置调用Less编译器
程序：C:\Users\Lenovo\AppData\Roaming\npm\lessc  // Less编译器的程序路径
参数：$FilePath$ $FileNameWithoutExtension$.css --source-map  // Less编译器的参数设置，指定要编译的文件路径、输出路径以及是否生成sourcemap
$FilePath$表示当前文件路径，$FileNameWithoutExtension$表示当前文件名（去除文件扩展名）
要刷新的输出路径：$FileDir$/$FileNameWithoutExtension$.css:$FileDir$/$FileNameWithoutExtension$.css.map  // Less编译后的输出路径，包括编译后的CSS文件和对应的sourcemap文件，其中$FileDir$表示文件所在目录