前言
在前端开发中，我们经常需要将静态文件从不同的文件夹中拆分出来，进行打包、压缩等操作。这时候，我们可以使用 gulp-extract-static 这个非常实用的 npm 包来解决这个问题。这个包可以方便地从多个文件夹中提取静态文件，并将其合并为一个文件夹，方便进行打包和压缩操作。
在本篇文章中，我们将为大家介绍如何使用 gulp-extract-static 包，并结合实例进行讲解，帮助大家更好地理解和掌握这个工具的使用。
安装和配置
首先，我们需要使用 npm 来安装 gulp-extract-static 包。在命令行中输入以下命令安装：
npm install gulp-extract-static --save-dev
安装完成后，在 gulpfile.js 中引入该模块：
const extractStatic = require('gulp-extract-static');然后，我们需要配置一下 gulpfile.js 文件，来指定需要提取的文件夹路径和输出的文件夹路径。在配置中，我们需要指定两个参数：
source: 需要提取的文件路径，支持 glob 表达式。destination: 输出的文件夹路径。
下面是一个简单的例子：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------------- - -------------------------------
--------------------------- -------- -- -
------ ---------------------------------- -------------------------
---------------------
------- ----------------- ----------------
------------ ---------------
---
---------------------------
---在上面的代码中，我们将所有 JS 文件和 CSS 文件从 ./src/scripts 和 ./src/styles 文件夹中提取出来，然后将其合并到 ./dist/static 文件夹中。
实例分析
考虑一个实际应用场景，假如我们需要从多个文件夹中提取图片，然后将图片放在一个文件夹中，方便进行后续的操作，比如压缩、打包等操作。这时候我们可以使用 gulp-extract-static 这个包来完成这个任务。
首先，我们需要安装 gulp-extract-static 包，如前所述。然后，在 gulpfile.js 中引入该模块：
const extractStatic = require('gulp-extract-static');下面是示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------------- - -------------------------------
------------------------ -------- -- -
------ ---------------------------------- -------------------------
---------------------
------- --------------- ----------------
------------ --------------------
----------- ------- ------ ------
---
---------------------------
---在上面的代码中，我们从 ./src/pages 和 ./src/styles 文件夹中提取静态文件，并将其输出到 ./dist/static/img 文件夹中。我们只提取 gif、jpg、png 三种文件格式的图片文件。
总结
以上就是使用 gulp-extract-static 包的相关介绍和示例。这个包非常实用，可以帮助我们轻松地从多个文件夹中提取静态文件，方便进行后续的操作。如果你希望更好地理解这个工具的使用方法，可以结合自己的实际项目进行尝试，相信会有一些收获。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600589c881e8991b448ed362