在前端开发中，自动化构建工具是必不可少的。而 gulp 作为一个流程自动化工具，广受欢迎。在使用 gulp 进行前端项目构建时，gulp-assembly-utils 这个 npm 包可以提供很大的便利。
gulp-assembly-utils 的作用
gulp-assembly-utils 是一个集成了常用功能的工具包，它包含了以下模块：
- cssCombine：用于将多个 css 文件合并成一个。
- jsCombine：用于将多个 js 文件合并成一个。
- htmlReplace：用于将 html 中的
<link>与<script>标签替换成合并后的文件引用。
安装步骤
使用 gulp-assembly-utils 之前，需要先在项目中安装它。
步骤如下：
在项目的根目录打开终端，输入以下命令：
npm install gulp-assembly-utils --save-dev
等待安装完成，就可以在项目的 package.json 中看到 gulp-assembly-utils 储存的信息，如下：
"devDependencies": { "gulp-assembly-utils": "^1.3.1" }
使用示例
cssCombine
下面是一个在 gulpfile.js 中使用 cssCombine 的示例代码：
var gulp = require('gulp');
var utils = require('gulp-assembly-utils');
gulp.task('combineCSS', function() {
return gulp.src('src/css/*.css')
.pipe(utils.cssCombine('bundle.css'))
.pipe(gulp.dest('build/css'));
});上述代码中，我们在 gulpfile.js 中定义了一个名为 combineCSS 的 gulp 任务，这个任务使用了 gulp.src 方法找到了所有的 css 文件，然后使用 cssCombine 方法将这些文件合并成一个名为 bundle.css 的文件。最后，通过 gulp.dest() 方法将合并后的文件保存到 build/css 目录下。
jsCombine
下面是一个在 gulpfile.js 中使用 jsCombine 的示例代码：
-- -------------------- ---- -------
--- ---- - ----------------
--- ----- - -------------------------------
---------------------- ---------- -
------ ----------
-------------------
----------------------
----------------
--
-----------------------------------
-----------------------------
---上述代码中，我们定义了一个名为 combineJS 的 gulp 任务，使用了 jsCombine 方法将三个 js 文件合并成一个名为 bundle.js 的文件，并通过 gulp.dest() 方法将合并后的文件保存到 build/js 目录下。
htmlReplace
下面是一个在 gulpfile.js 中使用 htmlReplace 的示例代码：
-- -------------------- ---- -------
--- ---- - ----------------
--- ----- - -------------------------------
------------------------ ---------- -
--- ------- - -
---- -----------------
--- --------------
--
------ ----------------------
---------------------------------
--------------------------
---上述代码中，我们定义了一个名为 replaceHTML 的 gulp 任务，它使用了 htmlReplace 方法，将 html 中的 <link> 与 <script> 标签替换成了合并后的文件引用。在 options 中，我们指定了合并后的 css 文件为 css/bundle.css，合并后的 js 文件为 js/bundle.js。
总结
gulp-assembly-utils 的使用，可以简化前端项目构建过程中的合并与替换等重复操作。我们可以在 gulpfile.js 文件中便捷地使用 cssCombine、jsCombine 与 htmlReplace 方法，提高前端开发的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067356890c4f7277583c59