什么是 Karoshi
Karoshi 是一个基于 Webpack 和 Gulp 的前端资源构建工具。它可以帮助我们自动化构建前端资源，并提供了一些常见的功能，比如压缩 CSS/JS，自动处理图片等等。
使用 Karoshi 可以让我们更快速地构建前端项目，同时减少手动配置的工作量。本文将为大家介绍如何使用 Karoshi 进行前端项目的构建。
安装 Karoshi
我们可以通过 NPM 安装 Karoshi：
npm install karoshi --save-dev
配置 Karoshi
Karoshi 支持多种任务，比如编译 Sass，处理图片等等。我们需要在 Karoshi 的配置文件中指定要执行的任务。在项目根目录下新建一个 karoshi.config.js 文件，设置以下内容：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -
-
----- -------
-------- ------------
---- ----------------------- ------------
----- ----------------------- -----------
--
-
----- -----
-------- ----------
---- ----------------------- ----------
----- ----------------------- ----------
--
-
----- --------
-------- ------------------------------
---- ----------------------- -----------
----- ----------------------- -----------
-
-
--上面的配置文件中定义了三个任务。
第一个任务编译 Sass，源码在 src/scss 目录下，编译后输出到 dist/css 目录下。
第二个任务是处理 JS 文件，源码在 src/js 目录下，处理后输出到 dist/js 目录下。
第三个任务是处理图片，源码在 src/img 目录下，处理后输出到 dist/img 目录下。
执行任务
接下来我们需要在 package.json 文件中定义要执行的命令，如下所示：
{
"scripts": {
"build": "karoshi"
}
}执行以下命令即可执行 Karoshi：
npm run build
结语
以上就是关于 Karoshi 的介绍和使用教程。通过使用 Karoshi，我们可以更加高效地构建前端项目，并且减少了手动配置的工作量。各位前端开发者可以根据自己的需要进行定制化配置。
示例代码
-- -------------------- ---- -------
------------- -----
----- -
------- --- ----- -------------
------- -
------------- --------
-
-const square = num => num * num; console.log(square(5)); // 25
<img src="img/logo.png" alt="Logo">
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055faf81e8991b448dcffe