随着前端技术的不断发展和更新，简化工作流程的工具和框架层出不穷。npm 是最常用的 package manager 之一，可以下载和管理各种 JavaScript 库和框架。而 little-man 就是一个可以帮助前端工程师轻松地构建自动化的工作流程的 npm 包。
什么是 little-man
little-man 是一个基于 gulp 的构建工作流程工具，可以帮助开发人员进行自动化构建、打包和编译。其主要特点包括：
- 简单易用：使用 gulp 的 API，易于配置和修改。
- 自动压缩：自动将压缩后的代码输出到指定的目录。
- 自动重载：可以自动刷新浏览器。
- 自动清除：可自动清除无用的文件和文件夹。
- 编译 Sass：支持 Sass 的编译，可以自动处理 CSS 前缀和压缩。
现在，让我们开始使用 little-man。
如何安装 little-man
要使用 little-man，必须在本地全局安装 gulp 和 little-man。
使用 npm 全局安装 gulp：
npm install -g gulp
使用 npm 全局安装 little-man：
npm install -g little-man
现在，我们已经安装了 gulp 和 little-man，我们将开始使用 little-man 来编译和压缩代码。
如何使用 little-man
创建一个新项目目录，并在其中创建一个 gulpfile.js 文件。
mkdir myproject cd myproject touch gulpfile.js
现在，打开 gulpfile.js 并添加以下代码：
-- -------------------- ---- -------
--- ---- - ----------------
--- --------- - ----------------------
-------------------- ---------- -
-----------
------ ------
------- --------
------- -----
----- -----
------------ ----
---
---这个 gulpfile.js 文件包含一个 gulp 任务和 little-man 的配置选项。
下面是 littleMan() 函数可用的选项列表：
| 选项 | 说明 |
|---|---|
| input | 输入文件的目录。 |
| output | 输出文件的目录。 |
| uglify | 布尔值，如果设为 true，则压缩 JavaScript 文件。 |
| sass | 布尔值，如果设为 true，则编译 Sass 文件。 |
| browserSync | 布尔值，如果设为 true，则自动刷新浏览器。 |
保存文件并在命令行中运行以下命令：
gulp
这将启动 gulp 并开始监视 src 目录中的文件。现在，当你更改文件时，gulp 将自动重新编译并输出到 build 目录中。
示例代码
在这个示例代码中，我们将创建一个简单的 web 应用程序，用 little-man 编译和压缩代码。
首先，创建以下文件和文件夹：
myapp/ ├── src/ │ ├── index.html │ ├── js/ │ ├── css/ │ └── sass/ ├── build/ └── gulpfile.js
打开 gulpfile.js 文件并添加以下代码：
-- -------------------- ---- -------
--- ---- - ----------------
--- --------- - ----------------------
-------------------- ---------- -
-----------
------ ------
------- --------
----- -----
------------ ----
---
--------------------------
--------------------------
-----------------------
-----------------------------
-------------------------
------------------------------
---这段代码指定了以下内容：
gulpfile.js的默认任务。- 使用 little-man 编译和压缩 Sass 文件。
- 自动刷新浏览器。
- 监视 index.html、JavaScript 文件和 CSS 文件的更改，并将这些文件复制到
build目录。
现在，你可以在 src 目录中创建你的应用程序，然后在命令行中运行以下命令：
gulp
这将启动 gulp 并开始监视 src 目录中的文件。现在，当你更改文件时，gulp 将自动重新编译并输出到 build 目录中。
总结
在本文中，我们详细介绍了 npm 包 little-man 的使用方法。little-man 可以帮助前端工程师轻松地构建自动化的工作流程，使代码编写变得更高效。你可以在你的项目中使用它，并通过读取文档了解更多信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005562a81e8991b448d315a