前言
在前端开发中，我们经常需要将一些外部库或者自己写的 JavaScript 文件引入到 HTML 页面中，以便于网站的运行。手动去写 <script> 标签显然是不可取的，因此我们需要一个自动化工具来完成这项任务。gulp-inject-js 就是这样一个 npm 包，它可以让我们更加方便地将 JavaScript 文件注入到 HTML 页面中。
安装
在使用 gulp-inject-js 之前，我们需要先将其安装到我们的项目中。使用 npm 命令即可完成安装：
--- ------- -------------- ----------
基本使用
gulp-inject-js 的基本用法非常简单，只需要在 gulpfile.js 文件中引入该包并配置参数即可。下面是一个最基本的配置示例：
----- ---- - ----------------
----- ------ - --------------------------
------------------- ---------- -
------ ------------------------
---------------
-----------------------
---上面的配置会将 ./index.html 中所有的 <script> 标签替换成一个包含所有 JavaScript 文件的标签。
配置选项
gulp-inject-js 提供了许多配置选项，可以让我们更加精细地控制如何注入 JavaScript 文件。下面是一些常用的配置选项：
ignorePath
ignorePath 可以用来忽略文件路径中的一些部分。例如，我们将 JavaScript 文件放在了 ./js 目录下，而 index.html 文件在根目录下，此时如果直接使用上面的配置，会把 ./js 目录也注入到 HTML 文件中。解决方法是使用 ignorePath：
------------------- ---------- -
------ ------------------------
-------------- ----------- ---- ---
-----------------------
---上面的配置中，我们设定了 ignorePath 为 'js'，表示忽略文件路径中的 ./js 部分。这样配置之后，注入到 index.html 文件中的代码会变成：<script src="/js/example.js"></script>。
starttag 和 endtag
starttag 和 endtag 用来指定要在 HTML 文件中查找并替换的标签，默认分别为 <!-- inject:js --> 和 <!-- endinject -->，通常情况下不需要修改。
------------------- ---------- -
------ ------------------------
--------------
--------- ----- -------- -----
------- ----- ------ -----
---
-----------------------
---transform
transform 用来修改注入的 JavaScript 代码。它接受两个参数，第一个参数是要修改的代码内容，第二个参数是当前文件的路径。我们可以使用它来进行一些特殊处理，例如加上 async 或 defer 属性。
------------------- ---------- -
------ ------------------------
--------------
---------- ------------------ ----- -
------ -------- ----------------- -----------------
-
---
-----------------------
---上面的配置中，我们使用了 transform 参数将注入的 JavaScript 代码加上了 async 属性。
sort
sort 用来指定注入 JavaScript 文件的顺序。它的值为 true 或一个排序函数。当值为 true 时，gulp-inject-js 会将文件按照自然排序（即文件名的字母顺序）进行排序。当值为一个函数时，gulp-inject-js 会使用该函数来排序。
------------------- ---------- -
------ ------------------------
--------------
----- ----------- -- -
--- ----- - ------------- --------- ----------------
--- ------ - ----------------------------------- --------
--- ------ - ----------------------------------- --------
------ ------ - -------
-
---
-----------------------
---上面的配置中，我们使用了 sort 参数通过文件名进行排序。该配置将会先注入 jquery.js，然后是 app.js，最后是 bootstrap.js。
总结
gulp-inject-js 是一个非常实用的 npm 包，可以帮助我们更加方便地将 JavaScript 文件注入到 HTML 页面中。通过上述的使用教程，相信读者已经能够轻松地掌握它的使用方法。在实际使用中，读者可以根据自己的需求，使用不同的配置选项来进行精细化控制，以达到更加优秀的效果。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600668e9d9381d61a3540bcf