如果你是一个前端开发者，你可能已经听说过 LESS 这种流行的 CSS 预处理器。它提供了许多方便的功能，如变量、嵌套选择器和 mixins 等等，使得我们可以更轻松地编写样式表。
而 gulp，是一个自动化构建工具，可以帮助开发者自动化执行诸如编译 LESS 到 CSS、压缩 JS/CSS、自动刷新浏览器等等一系列的任务。
然而，如果你试图在 gulp 中使用 LESS，你可能会遇到各种问题，如：
- LESS 编译失败，显示错误信息
- gulp.watch() 不监控 LESS 文件的修改
- 编译后的 CSS 文件不被注入到 HTML 中
这是为什么呢？下面我们来仔细分析这些问题，以及如何解决它们。
LESS 编译失败
在 gulp 中编译 LESS，我们通常使用 gulp-less 插件。但是，即使你已经正确安装了 gulp-less 插件，编译 LESS 文件时仍然可能遇到各种问题，如：
- SyntaxError: Unexpected token {
- TypeError: showOther is not a function
- AssertionError [ERR_ASSERTION]: Task function must be specified
这些问题的原因通常是因为我们没有正确配置 gulp 任务。下面是一些常见的错误：
错误 1：task function must be specified
这个错误的原因非常简单：你没有在 gulp 任务中指定对应的函数。
你应该这样定义一个 gulp 任务：
gulp.task('less', function () {
return gulp.src('./less/*.less')
.pipe(less())
.pipe(gulp.dest('./css'));
});错误 2：Unexpected token
当你编写 LESS 中嵌套的 CSS 代码时，你可能会遇到这个错误。这是因为 gulp-less 默认关闭了 strictMath 和 strictUnits 选项。
你可以通过在 gulpfile.js 中加入以下语句来解决该问题：
-- -------------------- ---- -------
--- ------- - -
----------- -----
------------ ----
--
----------------- -------- -- -
------ -------------------------
--------------------
--------------------------
---错误 3：*.css.map file not found
当你尝试编译 LESS 文件时，你可能会遇到类似下面的报错信息：
Error: ./dist/css/test.css.map: No such file or directory
这个问题可能是由于 gulp-sourcemaps 插件没有正确配置所致。
请参考下面的示例代码来正确使用 gulp-sourcemaps 插件：
-- -------------------- ---- -------
--- ---------- - ---------------------------
----------------- -------- -- -
------ -------------------------
------------------------
-------------
--------------------------------
--------------------------
---gulp.watch() 不监控 LESS 文件的修改
有时候，即使你已经正确地配置了 gulp 任务，gulp.watch() 也可能不会监控 LESS 文件的修改。这可能是由于 gulp.watch() 在监视 LESS 文件的过程中与 watch 模块发生冲突。
你可以在你的 gulpfile.js 文件中使用 chokidar 插件来代替 gulp.watch()，如下所示：
var chokidar = require('chokidar');
gulp.task('watch', function () {
chokidar.watch('./less/**/*.less').on('change', function () {
gulp.start('less');
});
});编译后的 CSS 文件不被注入到 HTML 中
如果你想使用 gulp-inject 插件将编译后的 CSS 文件注入到 HTML 中，你可能会遇到无法注入 CSS 文件的问题。
这个问题很可能是你没有正确配置 gulp-inject 插件所致。请参考下面的代码来正确配置 gulp-inject 插件：
-- -------------------- ---- -------
--- ------ - -----------------------
----------------- -------- -- -
--- -------- - ----------------------- ------ --------
------ ------------------------
-----------------------
-----------------------
---总结
尽管在使用 gulp 编译 LESS 文件时会遇到许多问题，但只要正确地配置 gulp 任务，你仍然可以轻松地编译 LESS。此外，使用 chokidar 和 gulp-inject 插件可以解决一些令人困扰的问题。
下面是一个完整的 gulpfile.js 文件示例，供你参考：
-- -------------------- ---- -------
--- ---- - ----------------
--- ---- - ---------------------
--- ---------- - ---------------------------
--- -------- - --------------------
--- ------ - -----------------------
--- ------- - -
----------- -----
------------ ----
--
----------------- -------- -- -
------ -------------------------
------------------------
--------------------
--------------------------------
--------------------------
---
------------------ -------- -- -
----------------------------------------------- -------- -- -
-------------------
---
---
----------------- -------- -- -
--- -------- - ----------------------- ------ --------
------ ------------------------
-----------------------
-----------------------
---
-------------------- -------- -------- ---------希望这篇文章能够帮助你顺利地在 gulp 中使用 LESS。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6465e387968c7c53b068d62e