什么是 burstmake？
Burstmake 是一个基于 Node.js 的 npm 包，它可以大大简化前端工程化开发的过程。同时，它还提供了许多便捷的功能，例如：压缩图片，处理 Less/Sass，转换 ES6/TypeScript，为静态页面添加 API 等。
如何使用 burstmake？
如果您已经在 Node.js 环境下，可以通过以下命令安装 burstmake：
--- ------- --------- ----------
安装完成后，在项目的根目录下创建名为 Burstmake.js 的文件，这是 burstmake 的配置文件。在该文件中，您可以配置各种任务和插件。下面是一个基础的 Burstmake.js 示例：
-------------- - -
------ -
-
----- ----------
--------- -
-
------- ----------------------------
-------- -
---------- -------
----------- --------
-------- ------- -------
-
-
-
-
--
-------- -
---------------------------- --------------------------------------
-
--上面的代码定义了一个名为 my-task 的任务，该任务由 processors/test-processor 插件处理。在 test-processor.js 文件中，您可以编写自己的插件逻辑。
下面是 test-processor.js 的示例代码：
-------------- - ----------------- -
------ ---------- -
----- - ---------- ----------- ------- - - --------
---------------------
----------------------- ---------------
------------------------ ----------------
--
--这个插件只是简单地打印出 Hello, World! 的信息和 inputPath、outputPath 的值。
现在，您可以运行以下命令，执行任务：
--------- -------
执行成功后，您将看到 Hello, World! 的信息和 inputPath、outputPath 的值被打印出来。
burstmake 的使用场景
- 图片压缩
利用 gulp-imagemin 插件，我们可以将图片自动压缩并输出到指定目录，代码如下：
-------------- - -
------ -
-
----- ---------
--------- -
-
------- ----------------
-------- -
---- ---------------
----- --------------
-
-
-
-
--
-------- -
---------------- ------------------------
-
--- Less/Sass 编译
使用 gulp-sass 插件，我们可以将 Less/Sass 文件编译为 CSS 文件，代码如下：
-------------- - -
------ -
-
----- -------
--------- -
-
------- ------------
-------- -
---- ------------------
----- -----------
-
-
-
-
--
-------- -
------------ --------------------
-
--- ES6/TypeScript 转换
gulp-babel 插件可以将 ES6/TypeScript 转换为 ES5 代码，代码如下：
-------------- - -
------ -
-
----- --------
--------- -
-
------- -------------
-------- -
---- --------------
----- -----------
------------- -
-------- ---------------
-------- -----------------------------------
-
-
-
-
-
--
-------- -
------------- ---------------------
-
--- Mock 数据
使用 json-mock-server 插件，我们可以模拟 API 数据，代码如下：
-------------- - -
------ -
-
----- -------
--------- -
-
------- -------------------
-------- -
----- -----
------- -
------------- ------------
-
-
-
-
-
--
-------- -
------------------- ---------------------------
-
--在该配置里，我们将请求 /api/users 路径的数据指向了文件 users.json。
总结
通过使用 burstmake，我们可以大大简化前端工程化开发的过程。无论您是压缩图片、处理 Less/Sass、转换 ES6/TypeScript，还是为静态页面添加 API，burstmake 都可以帮助您完成。同时，它还为您提供了扩展性，您可以根据自己的需求编写插件，满足自己的需求。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066c8fccdc64669dde57be