介绍
broccoli-funnel 是一个用于将文件从源目录复制到输出目录的 Broccoli 插件。它可以通过筛选器来选择需要复制的文件，同时也支持对文件进行简单的转换。
在前端开发中，我们常常需要使用构建工具来处理和优化代码，而 broccoli-funnel 则是 Broccoli 构建工具中最基础、最核心的插件之一。
安装
broccoli-funnel 可以通过 npm 安装：
npm install --save-dev broccoli-funnel
使用方法
首先，在项目中引用 broccoli-funnel 模块：
const funnel = require('broccoli-funnel');然后，定义输入目录和输出目录：
const inputNode = 'src'; const outputNode = 'dist';
接着，可以使用 funnel 方法创建一个 Broccoli 插件实例：
const filteredNode = funnel(inputNode, {
include: ['**/*.js'],
destDir: outputNode,
});在这个例子中，我们只复制 .js 文件，并将它们放到输出目录下。
最后，将该 Broccoli 插件实例与其他插件连接起来，最终生成所需的输出文件：
module.exports = filteredNode;
参数说明
funnel 方法可以接受两个参数：
inputNode: 输入目录，即待处理的文件夹路径。options: 选项对象，包含下列属性：srcDir: 源目录，即待复制的文件夹路径，默认值为inputNode。include: 包含筛选器，用于指定需要复制的文件或文件夹。可以是字符串、正则表达式或数组类型，默认值为['**/*']。exclude: 排除筛选器，用于指定不需要复制的文件或文件夹。可以是字符串、正则表达式或数组类型，默认值为[]。allowEmpty: 是否允许空的输入目录，如果为true则会在输出目录中创建一个空目录，默认值为false。destDir: 输出目录，即复制后的文件夹路径，默认值为.。
示例
以下是一个完整的使用案例：
-- -------------------- ---- ------- ----- ------ - --------------------------- ----- -------- - --------------------- ----- ----- - ------------------------------------- ----- --------- - ------ ----- ---------- - ------- -- -- -------- ---- ----- ------------ - ----------------- - -------- ------------ -------- ----------- --- -- -- --- ------ ----- -------------- - ------------------- - -------- ---------------------- --- ----- ------------ - ------------------------- -- -- -------- ---- -------------- - -------------
在这个例子中，我们先使用 broccoli-funnel 插件将 src 目录下的 .js 文件复制到 dist 目录下，然后使用 babel 插件将 ES6 代码转换为 ES5 代码，并使用 uglify-js 插件压缩代码。
总结
broccoli-funnel 是 Broccoli 构建工具中最常用的插件之一，它可以通过简单的筛选器来选择需要处理的文件，并将它们复制到输出目录中。在构建前端项目时，熟练掌握 broccoli-funnel 插件的使用方法非常重要。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/53953