gulp-less-glob 是一个 gulp 插件，用于自动编译 less 文件。它具有以下优点：
- 支持 glob 语法，一次编译多个 less 文件
- 能够处理 less 文件中的 @import 和 url 引用
- 实时编译，支持监听 less 文件，自动编译
如果你需要频繁编译 less 文件，或者需要适应多个项目环境，那么使用 gulp-less-glob 插件会让你的工作更加高效和便捷。
安装 gulp-less-glob
使用 npm 包管理器，可以方便地安装 gulp-less-glob。
npm install --save-dev gulp-less-glob
使用 gulp-less-glob
基本使用示例
在使用 gulp 编译 less 文件时，可以按以下方式使用 gulp-less-glob 插件：
const gulp = require('gulp'); const less = require('gulp-less-glob'); gulp.task('less', function () { return gulp.src('src/**/*.less') .pipe(less()) .pipe(gulp.dest('build/css')); });
这段代码使用 gulp 的 src 方法选择所有位于 src 目录中的 .less 文件，然后通过 less 方法进行编译，最后将输出文件保存在 build/css 目录中。
深度使用示例
- 缓存
gulp-less-glob 插件实现了缓存功能，当 less 文件没发生改变的时候会从缓存中读取，否则会重新编译。
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ---- - -------------------------- ----- ----- - ----------------------- ----------------- -------- -- - ------ ------------------------- -------------------- -- ----- ---- ------ ------------- ------------------------------ ---展开代码
- 导入和源 map
通过设置 less 方法的参数，可以进一步配置 gulp-less-glob 插件。
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ---- - -------------------------- ----- ---------- - --------------------------- ----------------- -------- -- - ------ ------------------------- ------------------------ -- --- ---------- ------------ ----------- -------------- -- ---- ---------- ----- -- -- ---------- -- --- ------------------------- -- -- ---------- ------------------------------ ---展开代码
这里示例代码中，将 importPath 配置为 src/theme，表示所有 less 文件中的 @import 引用从 src/theme 目录中读取。同时，使用 sourcemaps 插件进行源映射，生成的源 map 也将输出到 build 目录下。
总结
通过上述示例，可以看出 gulp-less-glob 插件非常适合进行 less 文件的编译。在使用插件时，可以根据自己的需求，更进一步配置插件，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600558a281e8991b448d5f17
