npm 包 @nhz.io/gulp-todo 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

@nhz.io/gulp-todo 是一个基于 gulp 的插件，可以自动提取项目中的代码注释中包含 TODO 标记的内容，并生成一份简洁的 TODO 列表。该插件可以大大简化项目开发中的规划以及代码维护工作。

安装

首先安装 gulp：

$ npm install gulp --save-dev

然后再安装 @nhz.io/gulp-todo：

$ npm install @nhz.io/gulp-todo --save-dev

使用

在 gulpfile.js 中配置：

const gulp = require('gulp');
const todo = require('@nhz.io/gulp-todo');

gulp.task('todo', function() {
  return gulp.src(['./src/**/*.js'])
    .pipe(todo())
    .pipe(gulp.dest('./'));
});

运行命令：

$ gulp todo

就可以在生成的文件中看到 TODO 列表了。

高级用法：

自定义 TODO 匹配正则

可以通过 todo() 方法自定义 TODO 列表的匹配正则，例如：

.pipe(todo({
  customTags: ['TODO', 'FIXME'],
  regExp: {
    source: '([\\w\\d\\s]*)',
    flags: 'g'
  }
}))

该正则默认会匹配所有 .js 文件中的以 // 或 /* */ 的注释符开头并包含 TODO: 或 FIXME: 的注释。

处理已完成的 TODO

在开发中，有些 TODO 已经完成了，我们不希望它们仍然出现在列表中，可以通过在注释中加入 DONE、FINISHED、COMPLETED 等字符串来指示它们已经完成。或者也可以自定义这些字符串：

.pipe(todo({
  doneTags: ['DONE', 'FINISHED', 'COMPLETED']
}))

在列表中添加来源

如果你的项目代码分散在多个代码仓库或者分支中，你可能会认为对于每一个 TODO，都希望能够在列表中加上来自哪个仓库或者分支的信息。可以通过设置 fileName 来实现：

.pipe(todo({
  fileName: 'todos.md'
}))

这样每个待办事项的前面就会添加来自哪个文件（仓库或者分支）的信息。

示例代码

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

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

结语

通过使用 @nhz.io/gulp-todo，我们可以轻松地生成代码维护 TODO 列表，可以有效地提高我们的工作效率。希望这篇教程能够帮助到大家，发现其中的不足，欢迎大家指出，让我们不断进步。

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