npm 包 tasking 使用教程

阅读时长 4 分钟读完

简介

tasking 是一个基于 gulp 的前端构建工具,提供了一些常用任务的默认配置和组合,可以帮助开发者快速构建前端项目,在日常开发中提高开发效率。

安装

首先,需要全局安装 gulp

然后,通过 npm 安装 tasking

用法

在项目目录下创建一个 gulpfile.js 文件,内容如下:

运行 gulp 命令,就可以开始运行任务了。tasking 已经提供了一些默认的任务,例如编译 scsslessstyluses6 等文件,拷贝静态资源文件等。通过 npm run 命令,我们可以使用这些默认任务,例如:

执行该命令就会编译所有的 scsslessstylus 文件,并将结果输出到 ./dist/css 目录下。

自定义任务

tasking 提供了很多默认任务,但是在实际开发中,我们可能需要自定义一些任务。可以使用 gulp.task 方法定义新的任务。

例如,我们想要压缩图片文件,可以创建一个新的 gulp 任务:

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

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

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

上述代码通过 gulpsrc 方法选择需要处理的图片文件,在管道中使用 imagemin 插件压缩图片,然后把结果输出至 ./dist/images 目录下。

配置文件

tasking 还提供了一个 tasking.config.js 配置文件,我们可以在该文件中配置自定义的任务、路径、插件等信息。

例如,下面代码展示如何添加一个新的压缩图片的任务:

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

上述代码中,我们定义了一个 compressImages 的新任务,通过 gulpsrc 方法选择需要压缩的图片文件,然后使用 imagemin 插件压缩图片,并将结果输出到 ./dist/images 目录下。

示例代码

下面是一个完整的 gulpfile.js 示例代码:

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

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

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

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

上述代码中,我们注册了 tasking,定义了一个新的 compress:images 任务,使用 gulpsrc 方法选择需要压缩的图片文件,然后使用 imagemin 插件压缩图片,并将结果输出到 ./dist/images 目录下。

总结

tasking 是一个非常方便的前端构建工具,可以帮助开发者快速构建前端项目。通过使用自定义任务和配置文件,可以适应不同的项目需求。建议开发者在实际开发中使用 tasking,以提高开发效率。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60057bf581e8991b448ebab0

纠错
反馈