npm 包 broccoli-less 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在 Web 前端开发中，我们经常需要使用 LESS 这种 CSS 预编译器来编写样式，而编译 LESS 其实并不是 JavaScript 的核心能力之一，因此需要执行命令或使用一些工具完成。在此，我们推荐使用 broccoli-less 这个 npm 包，由于其简单易用以及易于配置，而且可以集成在任何使用 broccoli 的构建流程之中。

介绍 broccoli-less

什么是 broccoli-less

broccoli-less 是一个使用 LESS 编译器的 broccoli 插件，可以将 LESS 文件编译成 CSS 文件。该库可以集成在任何使用 broccoli 的构建流程之中，以实现自动化构建。

broccoli 的简介

broccoli 是一个 JavaScript build tool，它可以自动化地编译、链接和创建代码。在 broccoli 的代码库中，每个节点都生成一个独立的文件夹。这些文件夹中包含可读的、可修改的文件，你可以在上面进行运算。每次构建，默认情况下，broccoli 不会使用重写技术，而是在生成的节点中创建手动引用。这意味着所有文件都存储在文件夹中，而文件夹之间的引用实际上只是一个包含路径的 JSON 对象，所以 broccoli 的构建效率很高。

安装 broccoli-less

安装 broccoli-less 非常简单，你只需要使用 npm 将其全局安装即可：

npm install -g broccoli-less

如何使用 broccoli-less

前置条件

在使用 broccoli-less 之前，你需要确保你已经正确地安装了 broccoli。如果你还没有安装，请先在命令行界面运行以下命令：

npm install -g broccoli

编写 Brocfile.js

在 broccoli 里面，Brocfile.js 是一个声明式构建的入口点，所有的构建流程都应该在这里定义。下面给你一个基本的例子，它假定你的 LESS 文件保存在 myapp/styles 文件夹中。

// Brocfile.js

var less = require('broccoli-less');
var sourceTree = 'myapp/styles';

var compiledLess = less(sourceTree, 'app.less', 'assets/css/app.css');

module.exports = compiledLess;

上面的代码使用了 broccoli-less 插件创建了名为 compiledLess 的 Tree，使用了源代码目录创造了一个 less 树，输出到 assets/css/app.css 文件。

构建文件

执行以下命令即可完成构建：

broccoli build dist

这将会把 compiledLess 生成的结果写入到 dist 文件夹中。

使用示例：

以下是一个使用 broccoli-less 的示例，我们将 LESS 样式编译成 CSS 样式并修改文件名。首先，我们需要安装所需的库：

npm install --save-dev broccoli-less broccoli-rename

然后在项目目录下创建 Brocfile.js 文件：

var less = require('broccoli-less');
var rename = require('broccoli-rename');
var sourceTree = 'styles/';
var lessTree = less(sourceTree, 'app.less', { outputSourceFiles: true });
var cssTree = rename(lessTree, function(relativePath) {
    return relativePath.replace(/\.less$/, '.css');
});
module.exports = cssTree;

在上面的代码中，我们：

导入 broccoli-less 和 broccoli-rename，这两个库提供了将 LESS 文件编译成 CSS 文件并修改文件名的功能。
指定 LESS 文件夹的相对路径。
构建 LESS 树，指定 LESS 文件名和一个选项。outputSourceFiles 选项设置为 true，它告诉 broccoli 输出的树应该包含所有源文件，以方便在构建期间进行故障排查。
构建 CSS 树，将 LESS 树中所有相对路径结尾为 .less 的文件重命名为 .css。

如果你使用 broccoli-cli，你可以在命令行中输入以下内容：

broccoli serve

启动 broccoli 服务器并查看实时编译 CSS。当你修改 LESS 文件（例如 app.less）并保存时，CSS 将自动重新编译，并且你将看到更新后的 CSS。

结论

使用 broccoli-less 可以简化 Web 前端开发过程中 LESS 样式编译与打包过程，提高工作效率。我们希望本文可以帮助读者快速上手 broccoli-less 这个 npm 包，提高项目开发效率。

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