在前端开发中，CSS 是必不可少的一部分。而使用了预处理语言 LESS 后，为了将 LESS 文件编译为 CSS 文件，常常使用 Gulp 进行自动化构建。但是，很多人在使用 gulp-less 插件编译 LESS 文件后，发现生成的 CSS 文件无法折叠，也就是说样式代码无法同行展示，会给项目的维护和排错带来很大的困扰。那么，如何解决这个问题呢？本文将为大家介绍相关的解决方法。
问题原因
在使用 gulp-less 插件编译 LESS 文件时，需要将 LESS 文件转化为 CSS 文件。而在转化过程中，gulp-less 插件会将每个 CSS 样式都显示为一行，导致文件内容非常的长，无法用肉眼较为舒适地查看和编辑。
解决方法
方法一：使用 gulp-cssnano 插件
gulp-cssnano 插件可以压缩 CSS 文件，同时还可以将 CSS 代码中的注释、空格、无用信息等去掉，从而使 CSS 代码变得更加紧凑。因此，我们可以在编译 LESS 文件后，再使用 gulp-cssnano 插件来压缩 CSS 文件，达到目标。
下载安装：
npm install gulp-cssnano --save-dev
使用示例：
-- -------------------- ---- -------
--- ---- - ----------------
--- ---- - ---------------------
--- ------- - ------------------------
----------------- -------- -- -
---------------------------
-------------
----------------
-----------------------------
---方法二：使用 gulp-clean-css 插件
gulp-clean-css 插件也可以压缩 CSS 文件，而且可以自定义压缩级别。与 gulp-cssnano 插件相比，gulp-clean-css 插件更加的适合对 CSS 文件进行压缩调整。
下载安装：
npm install gulp-clean-css --save-dev
使用示例：
-- -------------------- ---- -------
--- ---- - ----------------
--- ---- - ---------------------
--- -------- - --------------------------
----------------- -------- -- -
---------------------------
-------------
-----------------
-----------------------------
---总结
以上两种方法，一种是直接使用 gulp-cssnano 插件压缩 CSS 文件，一种是使用 gulp-clean-css 插件来自定义压缩级别。这两种方法都能够将 CSS 文件进行压缩，从而解决无法折叠的问题。但是，其实还有一种更好的办法：在编辑器中安装对应的插件来解决这个问题。比如，使用 VS Code 编辑器的话，可以安装 CSS Peek 插件来解决（推荐）。
最后，对于前端工程师来说，对常用的自动化构建工具掌握是必不可少的。而对于出现的各种问题，能够快速找到解决方案并加以解决，是我们成长的重要一环。希望本文能够帮助到大家。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645a18f0968c7c53b0c38a6d