npm 包 @bretkikehara/gulp-wrap 使用教程

阅读时长 6 分钟读完

介绍

@bretkikehara/gulp-wrap 是一个 npm 包,它提供了一种在 gulp 构建流中进行包装的方法。它可以让我们在构建时动态地插入一些代码段等。下面,我们将详细介绍该包的使用方法,并提供相应的运用示例。

安装

你可以通过 npm 来安装 @bretkikehara/gulp-wrap,使用下面的命令行即可:

使用

接下来,我们将介绍 @bretkikehara/gulp-wrap 的使用方法。在我们讲述使用方法之前,先让我们看一下该包所提供的参数。

1. header 和 footer

headerfooter 属性指的是包装文本的前后部分,即在包装时代码段前后的文本内容。常常我们会在这些位置写入一些全局的代码,如下:

-- -------------------- ---- -------
--------------- -------- -- -
    ------ --------------------------------
        -----------------------
        ------------
            ------- ---------- -- -----
            ------- ---------
        ---
        ----------------------------------------
---

上面代码将要进行构建的 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

纠错
反馈