npm 包 undertaker-common-tasks 的使用教程

简介

undertaker-common-tasks 是一款基于 Gulp 和 Undertaker 的插件，它提供了常见的构建任务的实现。使用该插件可以大大简化前端项目的构建流程，提高开发效率。

安装

使用 npm 进行安装：

npm install --save-dev undertaker-common-tasks

使用

引入模块：

const tasks = require('undertaker-common-tasks');

调用 tasks 函数即可注册任务，例如：

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

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

上述代码定义了一个名为 build 的任务，该任务会先执行 clean 任务，然后并行执行 html、css 和 js 任务，其中 html、css 和 js 任务都是由 undertaker-common-tasks 提供的。

支持的任务

clean

清理指定的文件或目录，例如：

exports.clean = tasks.clean(['dist']);

上述代码定义了一个名为 clean 的任务，该任务会清空 dist 目录。

html

编译 HTML 文件，可以嵌入 CSS 和 JavaScript，支持 EJS 模板引擎，例如：

exports.html = tasks.html({
  src: 'src/*.html',
  dest: 'dist',
  ejsLocals: {
    title: 'My Website'
  }
});

上述代码定义了一个名为 html 的任务，该任务会将 src 目录下的所有 HTML 文件编译后输出到 dist 目录，同时支持 EJS 模板引擎，并且传入了一个名为 title 的局部变量。

css

压缩 CSS 文件，可以自动添加浏览器前缀，例如：

exports.css = tasks.css({
  src: 'src/*.css',
  dest: 'dist'
});

上述代码定义了一个名为 css 的任务，该任务会将 src 目录下的所有 CSS 文件压缩后输出到 dist 目录，并自动添加浏览器前缀。

js

压缩 JavaScript 文件，可以使用 Babel 进行转译，例如：

exports.js = tasks.js({
  src: 'src/*.js',
  dest: 'dist',
  babel: true
});

上述代码定义了一个名为 js 的任务，该任务会将 src 目录下的所有 JavaScript 文件压缩后输出到 dist 目录，并使用 Babel 进行转译。

总结

undertaker-common-tasks 是一款十分实用的插件，它提供了常见的构建任务的实现，能够大大简化前端项目的构建流程。通过本文的介绍，您已经了解了如何安装和使用 undertaker-common-tasks，并且知道了它支持哪些任务。希望本文对您有所帮助！

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