前言
在开发前端项目中，我们经常需要用到构建工具来打包、压缩、提取公共模块等等操作。Node.js 生态圈中涌现出很多不错的构建工具，其中就包括 Node-builder 这个 npm 包。Node-builder 是一个轻量级的 Node.js 构建工具，它提供了一组简单易用的 API，可用于生成和处理文件，以及执行通用的任务（例如 Sass 编译、压缩）等等。
本文将介绍如何使用 Node-builder，包括如何安装和配置、常用 API 的使用、插件的使用等等，帮助读者快速学会使用 Node-builder 帮助开发前端项目。
安装和配置
Node-builder 是一个 npm 包，因此在使用之前需要先安装。在终端中打开你的项目文件夹，在命令行中输入以下命令：
npm install node-builder --save-dev
在安装完成后，需要在项目根目录创建一个 builder.js 文件，主要用于配置 Node-builder。
-- -------------------- ---- ------- -- ---------- ----- - ----- - - ------------------------ ------- ---- -------- ----- --------- --- - ------ --------- ------- ------------------- -- -------- - -- ---- -- -- ---展开代码
其中，src 表示源文件目录，dest 表示构建输出目录。js 表示打包 JS 文件的相关配置，entry 表示入口文件，output 表示输出文件的文件名。plugins 是可选的，用于配置插件。
常用 API
以下是 Node-builder 的常用 API。
src 方法
src 方法用于选择需要处理的源文件。它接受一个 glob 模式作为参数，可以选择单个文件或者文件夹。
-- -------------------- ---- ------- ----- - --- - - ------------------------ -- ------ ----------------- -------- --- --- -------- --- --- -------- --- --- -------------- -- ----- --------------- -------- --- --- -------- --- --- -------- --- --- --------------展开代码
dest 方法
dest 方法用于设置目标文件夹。
const { src } = require('node-builder'); src('src/app.js') .pipe(/* 处理流 */) .pipe(/* 处理流 */) .dest('dist');
pipe 方法
pipe 方法用于连接多个处理流。它接受一个处理流作为参数，返回一个新的处理流，可以链式调用。
const { src } = require('node-builder'); src('src/app.js') .pipe(/* 处理流 */) .pipe(/* 处理流 */) .pipe(/* 处理流 */) .dest('dist');
watch 方法
watch 方法用于监听文件变化。它接受一个 glob 模式作为参数，可以选择单个文件或者文件夹。一旦监听到变化，就会执行回调函数。
const { watch } = require('node-builder'); watch('src/**/*.scss', () => { // 处理 SCSS 文件 });
Clean 方法
Clean 方法用于清空目标文件夹。
const { Clean } = require('node-builder'); Clean('dist');
插件的使用
Node-builder 支持插件，在配置文件中可以配置插件，并通过插件进行相关的处理。以下介绍两个常用的插件的使用方法。
Sass 编译插件
node-sass 是一个将 Sass 编译成 CSS 的插件。在使用之前需要先安装 node-sass。
npm install node-sass --save-dev
配置插件：
-- -------------------- ---- ------- ----- ---- - --------------------- ----- - --- - - ------------------------ -------------------- ------ ------ ------------ ------------- -- - --------------展开代码
其中，outputStyle: 'compressed' 表示将 CSS 压缩。
Autoprefixer 插件
autoprefixer 是一个自动添加 CSS 前缀的插件。在使用之前需要先安装 autoprefixer。
npm install autoprefixer --save-dev
配置插件：
const autoprefixer = require('autoprefixer'); const { src } = require('node-builder'); src('src/**/*.css') .pipe(autoprefixer()) .dest('dist');
结语
Node-builder 是一个非常好用的构建工具，它提供的一组简单易用的 API 使得前端项目的构建变得更加容易和高效。本文仅仅是一个入门介绍，读者可以根据自己的需求和不同的场景进一步学习和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/76531
