npm 包 fis-parser-bainuo-less-plus 使用教程

如果你正在开发前端项目，你一定会使用到 LESS 预处理器。此时你就需要将 LESS 文件编译成 CSS 文件。fis-parser-bainuo-less-plus 就是一个可以将 LESS 文件编译成 CSS 文件的 npm 包。该包的前身是 fis-parser-bainuo-less，是 baio 前端开发团队的一个 fis-parser 插件。后来将该插件发布成了 npm 包。

安装

安装该 npm 包很简单，只需要在命令行中输入以下代码即可：

npm install fis-parser-bainuo-less-plus

使用方法

安装成功后，修改 fis-conf.js 文件，设置 fis-parser-bainuo-less-plus 为 less 的编译器。代码如下：

fis.match('*.less', {
  parser: fis.plugin('bainuo-less-plus'),
  rExt: '.css',
  release: '/static/$0'
});

配置项

该 npm 包还提供了一些配置项，下面将一一介绍。

souceMap

默认值为 false，表示不生成 sourcemap 文件。如果需要生成 sourcemap 文件，需要将其设置为 true。

fis.match('*.less', {
  parser: fis.plugin('bainuo-less-plus', {
    sourceMap: true
  }),
  rExt: '.css',
  release: '/static/$0'
});

optimize

默认值为 true，表示进行优化。如果设置为 false，将不会进行优化。

fis.match('*.less', {
  parser: fis.plugin('bainuo-less-plus', {
    optimize: false
  }),
  rExt: '.css',
  release: '/static/$0'
});

compress

默认值为 false，表示不进行压缩。如果需要进行压缩，请将其设置为 true。

fis.match('*.less', {
  parser: fis.plugin('bainuo-less-plus', {
    compress: true
  }),
  rExt: '.css',
  release: '/static/$0'
});

level

默认值为 3，表示压缩级别。可选值为 0~3。数字越大，压缩程度越高。

fis.match('*.less', {
  parser: fis.plugin('bainuo-less-plus', {
    level: 2
  }),
  rExt: '.css',
  release: '/static/$0'
});

示例代码

接下来，我们将通过一些示例代码来演示如何使用 fis-parser-bainuo-less-plus 。

示例一

下面这个例子将会编译 less 文件，压缩并生成 css 文件，并自动生成 sourcemap 文件。

-- -------------------- ---- -------
------------------- -
  ------- ------------------------------ -
    ---------- -----
    --------- -----
    ------ -
  ---
  ----- -------
  -------- ------------
---

示例二

下面这个例子只进行 less 文件的编译。

fis.match('*.less', {
  parser: fis.plugin('bainuo-less-plus'),
  rExt: '.css',
  release: '/static/$0'
});

示例三

下面这个例子将 less 文件编译为 css 文件，并自动生成 sourcemap 文件。

fis.match('*.less', {
  parser: fis.plugin('bainuo-less-plus', {
    sourceMap: true
  }),
  rExt: '.css',
  release: '/static/$0'
});

总结

通过本文的介绍，我们可以了解到 npm 包 fis-parser-bainuo-less-plus 的安装方法、使用方法及其配置项。希望本文能够对前端开发人员有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557a181e8991b448d4a41