介绍
just-task 是 npm 上的一个开源的任务管理工具，它允许我们通过命令行来执行各种任务，如编译、打包、测试等。这些任务都可以通过 just-task 来实现，模块化和可重用，使我们可以轻松地构建前端项目。
在本文中，我们将学习如何使用 just-task 来创建一个前端项目，并进行一些常用的任务，如打包、测试、构建等。此外，我们还将探讨如何集成 just-task 到其他工具中，如 Prettier、ESLint 等。
安装
首先，我们需要在全局安装 just-task：
npm install -g just-task
安装完成后，我们可以通过以下命令来验证是否成功安装了：
just-task --version
如果输出了版本号，那说明已经成功安装了 just-task。
基本用法
创建任务
使用 just-task 创建一个新的任务非常简单，只需要在项目根目录下创建一个名为 just.config.js 的文件，然后指定需要执行的任务：
module.exports = {
myTask() {
console.log("Hello, world!");
}
};在这个例子中，我们创建了一个名为 myTask 的任务，当我们执行 just myTask 命令时，它将在控制台输出 Hello, world!。
处理多个任务
如果我们需要同时处理多个任务，可以将这些任务定义为一个数组：
-- -------------------- ---- -------
-------------- - -
------ -
-
----- ----------
------ -
------------------- ---------
-
--
-
----- ----------
------ -
--------------------- ---------
-
-
-
--在这个例子中，我们定义了两个任务：myTask1 和 myTask2，它们都会在执行 just tasks 命令时被处理。
异步任务
有时我们的任务需要执行一些异步操作，如读取文件、写入文件、请求 API 等等。这时我们可以将任务定义为异步函数，使用 Promise 或 async/await 等方式来处理异步操作：
module.exports = {
async compileCss() {
const css = await readFile("src/styles/index.css");
const result = await postcss([cssnext]).process(css);
await writeFile("lib/styles/index.css", result.css);
}
};在这个例子中，我们的任务 compileCss 是一个异步函数，它会先读取 src/styles/index.css 文件，然后使用 postcss 库对其进行处理，最后将结果写入 lib/styles/index.css 文件。
配置选项
just-task 还提供了一些配置选项，可以用来控制任务的行为。下面是一些常用的选项：
watch：当设置为true时，会监视文件的变化并重新执行任务。src：指定源文件的路径。dest：指定输出的目录。
例如：
module.exports = {
myTask: {
watch: true,
src: "src/**/*.js",
dest: "dist"
}
};在这个例子中，我们定义了一个名为 myTask 的任务，这个任务会在 src 目录下找到所有 .js 文件，并将其打包成一个文件，输出到 dist 目录下。此外，它还会监听文件的变化并自动重新执行任务。
高级用法
集成 Prettier
Prettier 是一个非常流行的代码格式化工具，它可以自动格式化代码，使代码质量更加一致、清晰。可以使用 just-task 集成 Prettier，以便在每次提交代码时自动格式化代码。
首先，我们需要安装 prettier 和 lint-staged 两个库：
npm install --save-dev prettier lint-staged
然后，在 just.config.js 中添加以下代码：
module.exports = {
lintstaged: {
"*.js": files => `prettier --write ${files}`,
}
};在这个例子中，我们定义了一个名为 lintstaged 的任务，它会使用 lint-staged 库来在提交代码前自动执行 prettier。此外，我们还指定了要处理的文件类型为 .js。
集成 ESLint
类似地，我们也可以集成 ESLint 来检查代码质量。首先，我们需要安装 eslint、eslint-config-airbnb-base 和 eslint-plugin-import 三个库：
npm install --save-dev eslint eslint-config-airbnb-base eslint-plugin-import
然后，在 just.config.js 中添加以下代码：
module.exports = {
lint() {
return gulp
.src(["src/**/*.js"])
.pipe(eslint())
.pipe(eslint.format());
}
};在这个例子中，我们定义了一个名为 lint 的任务，当前任务会执行 ESLint 并检查 src 目录下的所有 .js 文件。执行完成后，它会将检查结果输出到控制台上。
结论
在这篇文章中，我们学习了如何使用 just-task 来创建前端项目，并进行一些常规任务。我们还探讨了如何集成 Prettier 和 ESLint 等工具，以便在日常开发中提高代码质量和开发效率。
just-task 是一个非常强大而灵活的工具，它为我们提供了极高的自定义能力，使我们可以轻松地构建前端项目。如果你正在寻找一个简单而有效的任务管理工具，just-task 绝对是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f0425a6403f2923b035be5d