在前端开发中，经常需要将多个文件或者模块合并成一个文件，这个过程中我们需要使用构建工具来完成这些任务。glue-grunt 是一款非常好用的 npm 包，它可以帮助我们将多个文件合并成一个文件，同时可以指定合并后文件的压缩以及是否添加压缩后的 map 文件。
安装
glue-grunt 是一个 npm 包，可以通过 npm 安装：
npm install glue-grunt --save-dev
配置 Glue-grunt
在使用 glue-grunt 之前，需要对其进行配置：
-- -------------------- ---- -------
------------------
----- -
-------- -
--------------- -------
--------------- --------
--------- ---
--------- ---
----------- ---
---------- ------
------- ------
---- -----
------- ----------
--
----- -
---- ----------------
----- ---------------
-
-
---其中，glue 代表合并任务名称，sourceBasePath 和 targetBasePath 分别指定合并前和合并后的文件夹路径，threshold 是文件大小阈值，如果文件大小超过此值会启用 stream api 进行合并（默认为 10000B），minify 代表传入的文件是否需要丑化，map 代表是否需要生成 map 文件，output 代表输出文件名称。
使用 glue-grunt
使用 glue-grunt 十分简单，只需要在 Gruntfile.js 中进行如下配置即可：
grunt.loadNpmTasks('glue-grunt');
grunt.registerTask('default', ['glue']);在命令行中执行 grunt glue 即可将文件合并成一个文件。
演示代码
假设我们有如下文件结构：
├── Gruntfile.js
└── src
├── hello.js
├── index.js
└── world.js其中 hello.js 内容如下：
function hello() {
console.log('Hello');
}world.js 内容如下：
function world() {
console.log('World');
}index.js 内容如下：
import hello from './hello'; import world from './world'; hello(); world();
完成如下配置：
-- -------------------- ---- -------
------------------
----- -
-------- -
--------------- -------
--------------- --------
--------- ---
--------- ---
----------- ---
---------- ------
------- ------
---- -----
------- ----------
--
----- -
---- ----------------
----- ---------------
-
-
---
---------------------------------
----------------------------- ----------运行命令 grunt glue 后，在 dist 文件夹中生成如下内容：
-- -------------------- ---- ------- ---- -------- -------- ------- - --------------------- - -------- ------- - --------------------- - -------- --------
综上，以下是 guide-grunt 可以帮助我们完成的工作：
- 合并多个文件。
- 可以设置合并前和合并后的文件夹路径。
- 设置文件大小阈值，可以启用 stream api 进行合并。
- 可以生成 map 文件，方便调试。
- 可以生成压缩后的文件。
- 可以指定输出文件名。
通过使用 guide-grunt，我们可以使我们的前端开发工作变得更加高效，从而提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e6e255dee6beeee741f