介绍
@bretkikehara/gulp-wrap 是一个 npm 包，它提供了一种在 gulp 构建流中进行包装的方法。它可以让我们在构建时动态地插入一些代码段等。下面，我们将详细介绍该包的使用方法，并提供相应的运用示例。
安装
你可以通过 npm 来安装 @bretkikehara/gulp-wrap，使用下面的命令行即可：
--- ------- ----------------------- ----------
使用
接下来，我们将介绍 @bretkikehara/gulp-wrap 的使用方法。在我们讲述使用方法之前，先让我们看一下该包所提供的参数。
-------- - -
------- ---
------- ---
------- ---
---------- -----
-------------- -----
-1. header 和 footer
header 和 footer 属性指的是包装文本的前后部分，即在包装时代码段前后的文本内容。常常我们会在这些位置写入一些全局的代码，如下：
--------------- -------- -- -
------ --------------------------------
-----------------------
------------
------- ---------- -- -----
------- ---------
---
----------------------------------------
---上面代码将要进行构建的 JavaScript 文件包裹在了匿名函数内。在构建后的代码中，我们的 JavaScript 代码将会被一个匿名函数包起来，这个函数会自动执行，从而将代码只暴露出来函数内的变量定义。这是一个比较常见的 JavaScript 包装策略。
2. indent
indent 参数用来指定包装后的代码段缩进距离（一般我们会自己进行代码缩进），下面是一个例子：
----------------- -------- -- -
------ ----------------------------
------------
------- ---------------------
------- -------------------
------- - -- -- --------- ----
---------- ------
---
----------------------------------
---3. separator
separator 是一个可选参数，指的是用于分隔被包装代码段的分隔符。默认分隔符为一个空格，下面的代码是将一个文件夹下的所有 HTML 文件进行名称更改，并用分割线分隔：
----------------- -------- -- -
------ ----------------------------
-------------- -------- ----------- --- -- -----
------------
------- ---------------------
------- ---------------------
---------- ------------------------------------------------
---
----------------------------------
---4. skipUndefined
skipUndefined 参数可以用来控制在打包的时候是否将 undefined 表达式过滤掉，避免其在代码中出现。默认情况下该参数为 false，即不过滤 undefined。下面的示例代码将使用 skipUndefined 参数，跳过 undefined 的情况。
----------------- -------- -- -
------ -------------------------
-------------
------------
------- ------- --------------------
------- -------------
-------------- ----
---
---------------------------
---上面代码中，假如 less 文件中没有定义任何变量，则默认也就没有了，但我们仍旧可以在包装时添加额外的文本内容，这样代码输出时仍能保留代码结构的形式。
示例
下面是一个完整的示例代码，该代码用来将所有的 .hbs 文件打包为一个 JavaScript 文件：
----- ---- - ----------------
----- ---- - -----------------------------------
----- ------ - -----------------------
----- ---------- - ---------------------------
---------------------- -----------
-------------------------------
-------------------
----------------------------------- -------- ------
-----------------------------
-------------------------------------
---上述代码中，使用 gulp-handlebars 将所有的 .hbs 文件转化为对应的 JavaScript 文件，然后使用 @bretkikehara/gulp-wrap 对该代码片段进行包装。最终，我们会将输出的 JavaScript 文件保存到 build/templates/ 目录下。
结论
到这里，我们就详细介绍了 @bretkikehara/gulp-wrap 的使用方法，包括其参数以及使用方法。我们又给出了一些实际的应用示例，让大家更好地了解该包的使用。希望本文能够对大家有所帮助，也希望大家可以在日常前端开发中灵活运用这个好用的 gulp 工具。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055eae81e8991b448dc362