npm 包 generator-taskr 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

前端工程化是当前前端开发的趋势，越来越多的开发者开始关注如何优化前端工作流。generator-taskr 是一个帮助前端工程师生成基于 Taskr 的任务流的 npm 包，为前端工程化提供了很好的支持。

安装生成器

如果你已经安装了 npm，可以通过以下命令来安装 generator-taskr：

npm install -g yo generator-taskr

如果你还没有安装 npm，可以通过以下命令来安装：

brew install node

生成任务流

生成任务流很简单，只需要在终端输入以下命令并按照提示操作即可：

yo taskr

生成的目录结构

生成的任务流目录结构如下：

-- -------------------- ---- -------
--- ------------
--- ---------
--- -----------
--- ----
-   --- ---
-   -   --- -----------
-   --- --
-       --- ----------
--- ---
-   --- --
-   -   --- ------
-   --- ----
-       --- --------
--- ------
    --- ---
    -   --- -------------
    --- --
    -   --- -------------
    -   --- ----------------
    --- ----------

任务流介绍

Taskr 是一个基于 Gulp 的任务执行器，与 Gulp 不同的是 Taskr 采用了完全的 JavaScript API 来定义任务，使得任务定义更加灵活。

generator-taskr 提供了一些常用的任务，包括：

css：编译 SCSS 并合并成一个 CSS 文件。
js：合并、压缩 JavaScript 文件。
sync：启动服务器，并在保存代码时自动刷新浏览器。
default：默认任务，执行 css 和 js 任务。

在任务流中，我们可以使用 Taskr 定义的任务流 API 创建自己的任务。需要注意的是，我们需要在 taskfile.js 中使用 API 来定义任务。

下面是一个示例任务：

module.exports = function (task) {
  task('myTask', function () {
    return task
      .source('src/assets/**/*.jpg')
      .image()
      .target('dist/assets');
  });
}

这个任务将 src/assets 目录中的所有 JPG 图片压缩并复制到 dist/assets 目录中。

总结

通过 npm 包 generator-taskr，我们可以快速生成任务流，并对其进行定制化的调整。Taskr API 具有灵活性，更加便于任务的定义，如果你正在寻找一种优化前端工作流的方法，那么 generator-taskr + Taskr 可能是一个不错的选择。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055b8f81e8991b448d9359