简介
gulp-first 是一个 npm 包，用于在 gulp 中实现在文件流中加入第一个文件的功能。该包支持 gulp 3 和 gulp 4。
安装
在项目中安装 gulp-first：
npm install gulp-first
使用
引入 gulp 和 gulp-first：
const gulp = require('gulp');
const first = require('gulp-first');gulp 3 使用方法
在 gulp 3 中，需要使用 gulp.task 函数来定义任务，并使用 gulp.src 函数指定需要处理的文件，将其传入 first() 函数中即可实现在文件流中加入第一个文件：
gulp.task('example', function() {
return gulp.src('src/**/*.js')
.pipe(first())
.pipe(/* 处理文件 */)
.pipe(gulp.dest('dist'));
});gulp 4 使用方法
在 gulp 4 中，使用 gulp.series 或 gulp.parallel 函数组合任务，并在其中使用 gulp.src 函数指定需要处理的文件，将其传入 first() 函数中即可实现在文件流中加入第一个文件：
gulp.task('example', gulp.series(function() {
return gulp.src('src/**/*.js')
.pipe(first())
.pipe(/* 处理文件 */)
.pipe(gulp.dest('dist'));
}));示例代码
假设有以下目录结构：
project ├── node_modules ├── src │ ├── foo.js │ ├── bar.js │ └── baz.js └── gulpfile.js
假设需要对 src 目录中的所有 js 文件进行压缩处理，保留第一个文件，则可以在 gulpfile.js 文件中定义任务：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - -----------------------
----- ----- - ----------------------
------------------------ ---------- -
------ -----------------------
--------------
---------------
----------------------------
---
-------------------- ----------------------------以上代码中，定义了一个名为 compress-js 的任务，该任务依赖于一个名为 first 的插件。该插件的作用是在文件流中加入第一个文件。
然后，使用 uglify 插件将 JavaScript 文件压缩，并将输出文件保存在 dist/js 目录中。
最后，定义了一个默认任务，该任务会执行 compress-js 任务。可以通过运行以下命令来运行默认任务：
gulp
这将在 dist/js 目录中生成压缩后的 JavaScript 文件。
总结
gulp-first 是一个非常简单的 npm 包，但它在实际的开发中非常有用。它可以便捷地将第一个文件添加到文件流中，方便我们进行文件的处理。
当然，在实际的开发中，我们也可以使用其他的 gulp 插件来实现类似的功能。但使用 gulp-first 插件是最便捷的方式之一。
希望本教程可以帮助你更好地了解和使用 gulp-first 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cc381e8991b448da639