Metalsmith 是一个用于构建静态网站的 Node.js 工具,允许用户使用自己的插件链来处理文件。其中,metalsmith-less 插件是一个将 Less 文件编译为 CSS 的 Metalsmith 插件。
安装和配置
在安装 metalsmith-less 之前,需要确保已经全局安装了 metalsmith。然后,通过 npm 安装 metalsmith-less:
npm install metalsmith-less
接下来,在 Metalsmith 的配置中加入该插件并添加所需参数:
-- -------------------- ---- ------- ----- ---------- - ---------------------- ----- ---- - --------------------------- --------------------- ----------- -------- ------------ -------------------- ---- --- -------------------- - -- ----- ----- ---- ------------------ ------------ ---
上述配置使用了 **/*.less
模式匹配所有扩展名为 .less
的文件,并启用了动态源映射功能。
API
pattern
- 类型:String | Array[String]
- 默认值:
'**/*.css'
指定要处理的文件的匹配模式,支持 glob 模式。如果传递多个字符串,则可以将它们作为数组传递。
options
- 类型:Object
- 默认值:
{}
指定 Less 编译器的选项。详情请参阅 Less.js 文档。
useDynamicSourceMap
- 类型:Boolean
- 默认值:
false
指定是否启用动态源映射功能。如果启用,则在编译后的 CSS 中包含源映射信息,使得在浏览器中调试时更加方便。但是,启用该选项会增加编译时间和输出文件大小。
示例代码
以下是使用 metalsmith-less 插件的示例代码:
-- -------------------- ---- ------- ----- ---------- - ---------------------- ----- ---- - --------------------------- --------------------- ----------- -------- ------------ -------------------- ----- -------- - --------- ---- - --- -------------------- - -- ----- ----- ---- ------------------ ------------ ---
以上代码将所有扩展名为 .less
的文件编译为压缩过的 CSS 文件,并启用了动态源映射功能。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/45727