npm 包 @electerious/basictasks 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

随着前端技术的发展，前端的开发也变得越来越复杂。优化和管理大型的前端项目变得非常关键，因此管理和优化工具也变得非常重要。@electerious/basictasks 就是这样一款 npm 包。

@electerious/basictasks 是一个工具集合，包括了处理和优化前端项目中的一些基本操作。它提供了许多预设任务，例如压缩/优化图片、压缩/优化 CSS/JS 文件、转换 Scss/Css 文件、自动添加 CSS 前缀、删除 HTML 注释等等。

本文将介绍如何使用 npm 包 @electerious/basictasks 并为大家提供详细的教程和示例代码。

安装 & 使用

安装 @electerious/basictasks 相对比较简单，只需要在命令行中输入以下命令即可：

npm install -g @electerious/basictasks

-g 表示在全局范围内安装该 npm 包。

安装完成后，我们可以在命令行中执行下面这条命令：

basictasks

这会在命令行中列出所有可用的任务。

接下来，我们在项目的根目录下新建一个 tasks 文件夹，然后新建一个 default.js 文件。

module.exports = function(gulp, callback) {
    callback();
};

这里我们使用 Gulp，按照这个示例文件中的代码，可以看到默认的任务并没有做什么事情。如果我们要让 Gulp 运行一些任务，我们需要使用 @electerious/basictasks 提供的工具来帮我们完成任务。

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


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

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

在这个文件中，我们定义了一个名为 default 的 Gulp 任务。在这个任务中，通过调用 @electerious/basictasks 中的方法，我们对项目中的图片、CSS 和 JavaScript 进行了编码，使它们在浏览器中加载更快。

预设任务

@electerious/basictasks 包含了许多预设任务，这些任务能帮助我们完成一些常见的基本操作，我将在下面具体介绍这些任务。

encodeImages

压缩/优化项目中的图片。

tasks.encodeImages(gulp[, src[, dest[, options]]])

gulp：Gulp 对象。
src：带有图片的文件夹路径，默认 folder ./src/img.
dest：文件夹路径，用于存储优化后的图片，默认 folder ./dist/img.
options：可选参数用于将构建任务与 gulp-changed 和 gulp-imagemin 一起使用，例如: { pngquant: ['--quality=50-70', '--speed=1'], gifiicle: ['--colors', '64', '--use-col=web'] }.

示例：

tasks.encodeImages(gulp, './src/img', './dist/img');

encodeCss

压缩/优化 CSS 文件。

tasks.encodeCss(gulp[, src[, dest[, options]]])

gulp：Gulp 对象。
src：带有 CSS 的文件夹路径，默认 folder ./src/css.
dest：文件夹路径，用于存储优化后的 CSS，默认 folder ./dist/css.
options：可选参数用于将构建任务与 gulp-changed 或 gulp-postcss 一起使用，例如：{ autoprefixer: { grid: true }, cssnano: { discardComments: { removeAll: true } } }.

示例：

tasks.encodeCss(gulp, './src/css', './dist/css');

encodeJs

压缩/优化 JavaScript 文件。

tasks.encodeJs(gulp[, src[, dest[, name[, options]]]])

gulp：Gulp 对象。
src：带有 JavaScript 的文件夹路径，默认 folder ./src/js.
dest：文件夹路径，用于存储优化后的 JavaScript，默认 folder ./dist/js.
name：JavaScript 文件名称前缀，用于将所有 JS 文件打包成一个文件，例如：app.min.js。为来使用输入目录（默认是 false）。
options：可选参数，用于将构建任务与 gulp-changed 或 gulp-uglify-es 一起使用，例如: { mangle: true, compress: true }.

示例：

tasks.encodeJs(gulp, './src/js', './dist/js');

encodeScss

将 Scss/Css 文件编译为 CSS 文件

tasks.encodeScss(gulp[, src[, dest[, options]]])

gulp：Gulp 对象。
src：带有 Scss/Css 的文件夹路径，默认 folder ./src/scss.
dest：文件夹路径，用于存储编译后的 CSS，默认 folder ./dist/css.
options：可选参数，用于将构建任务与 gulp-changed 和 gulp-sass 一起使用，例如: { outputStyle: 'compressed' }.

示例：

tasks.encodeScss(gulp, './src/scss', './dist/css');

clean

删除目标文件夹所有的文件和文件夹，相当于清空目标文件夹。

tasks.clean(gulp[, dest])

gulp：Gulp 对象。
dest：需要删除的文件夹路径，默认 folder ./dist.

示例：

tasks.clean(gulp, './dist');

结束语

@electerious/basictasks 是一个非常实用的 npm 包，它提供了许多优化前端项目的基础操作，使开发变得更加轻松。本文介绍了如何使用 @electerious/basictasks 这个 npm 包，以及如何使用它提供的各种预设任务和 API，希望为你的工作和学习有所帮助。如有问题或建议，欢迎在评论区讨论。

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