npm 包 @alexistessier/gulp-workflow-common-task 使用教程

@alexistessier/gulp-workflow-common-task 是一个适用于前端项目的 Gulp 工作流常用任务的 npm 包。本文将介绍 npm 包的基本使用方法、注意事项以及示例代码,帮助读者更迅速地掌握。

安装

在项目根目录下,使用 npm 命令安装 @alexistessier/gulp-workflow-common-task

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

在全局安装 Gulp:

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

安装完成后,即可在项目中使用 @alexistessier/gulp-workflow-common-task 插件。

使用方法

  1. 在项目根目录下,创建一个 config 目录
  2. config 目录下创建一个 gulpfile.common.js 文件
  3. gulpfile.common.js 中按配置要求配置任务
  4. 在项目根目录下,创建一个 gulpfile.js 文件
  5. gulpfile.js 中引入 @alexistessier/gulp-workflow-common-task 插件,并传入与 gulpfile.common.js 中相同的配置信息
  6. 运行 Gulp 任务

注意事项

  1. gulpfile.common.js 中必须导出一个对象,并配置 srcdest 等常用任务。其中,src 为要操作的源文件,dest 为生成的目标文件。
  2. gulpfile.js 中必须按 gulpfile.common.js 中配置的任务名依次调用插件。
  3. @alexistessier/gulp-workflow-common-task 插件中已经预设了一些常用任务。如果你想要使用更多任务,请在 gulpfile.common.js 中按配置要求添加。
  4. 本插件与 Gulp 版本兼容性为 4.0 及以上版本,请确保使用正确的 Gulp 版本。

示例代码

gulpfile.common.js 中的示例代码:

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

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

gulpfile.js 中的示例代码:

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

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

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

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

以上的示例代码中,我们例举了两个任务:单元测试 build 任务、复制静态资源到开发目录。这里只是简单的列举,实际上该 npm 包支持很多常用任务的配置,如压缩 CSS、HTML、JS 等文件,启动本地服务等。读者可以根据实际需求配置。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/112613


猜你喜欢

  • npm 包 @types/graceful-fs 使用教程

    介绍 npm 上有很多第三方库可以加速前端开发,但在使用这些库时,我们往往需要为它们编写类型声明文件。在 TypeScript 中,类型声明文件可以提高代码的可读性以及可维护性。

    5 年前
  • npm 包 @types/exit 使用教程

    在前端开发中,我们时常会用到 Node.js 环境,而 Node.js 环境下需要做一些与命令行交互的操作,比如退出程序。而退出程序时需要用到 process.exit() 方法,而此方法在 Type...

    5 年前
  • npm包 @types/cssnano 使用教程

    在web前端开发中,有时需要对CSS文件进行精简和压缩以优化网站性能,这时候可以使用 cssnano 这个npm包。 在使用cssnano之前,我们需要先安装它的类型声明包 @types/cssnan...

    5 年前
  • npm 包 @types/autoprefixer 使用教程

    前言 随着前端技术的不断发展,前端开发也变得越来越复杂,需要使用的工具也越来越多,其中,前端打包工具 webpack 相信相当一部分前端开发者们已经使用过了,而在 webpack 中使用 postcs...

    5 年前
  • npm 包 @types/sass 使用教程

    前言 Sass 是 Web 前端开发中常用的 CSS 预处理器,它提供了更加强大的 CSS 写法,使得样式代码更加易于维护和扩展。而针对 Sass 的类型定义文件 @types/sass 则能够为开发...

    5 年前
  • npm 包 @alicornlabs/labs-design 使用教程

    随着 Web 技术的不断进步,前端开发已经逐渐成为了互联网行业中不可或缺的一环,越来越多的企业也开始关注前端的开发和管理。此时,npm 包作为前端项目中经常使用的代码组织形式,也变得越来越重要。

    5 年前
  • npm 包 @adhocteam/component-library 使用教程

    介绍 在现代前端开发中,组件库是一个不可或缺的部分,因为它提供了一致的设计和可重用的代码,用于在多个项目中构建用户界面。@adhocteam/component-library 是一个优秀的 npm ...

    5 年前
  • npm 包 @activfinancial/tpi-viewer 使用教程

    在当前的前端项目中,有许多场景需要用到数据的可视化展示,并且需要通过网页实时更新,实现数据的实时展示。@activfinancial/tpi-viewer 是一款可以帮助前端项目实现数据展示的 npm...

    5 年前
  • npm 包 @activfinancial/news-viewer 使用教程

    介绍 在前端开发中,通常需要通过 API 获取并展示新闻内容。如果我们能够使用一个现成的 npm 包来快速搭建新闻展示页面,那么对于我们的开发效率和代码质量都会有很大的帮助。

    5 年前
  • npm包@activfinancial/cg-api-explorer使用教程

    简介 npm包@activfinancial/cg-api-explorer是一个用于探索Activ产品的API的JavaScript库。它为前端开发者提供了使用Activ产品API的简便方式,无需详...

    5 年前
  • npm 包 @activfinancial/activ-workstation 使用教程

    在前端开发中,使用npm包可以帮助我们更加快捷和方便地开发项目。本文介绍如何使用 @activfinancial/activ-workstation 这个npm包。

    5 年前
  • npm 包 @abp/ng.theme.shared 使用教程

    介绍 @abp/ng.theme.shared 是一个 Angular 组件库,提供了一些共享的主题和样式,可以用于创建一致性的 UI,从而为应用程序提供更好的用户体验。

    5 年前
  • npm 包 @abp/font-awesome 使用教程

    简介 在前端开发中,字体图标使用越来越广泛,Font Awesome 是目前流行度最高的一种字体图标库。它提供了多种图标以及丰富的样式选项,适用于各种不同的需求。 @abp/font-awesome ...

    5 年前
  • npm 包 @aacassandra/font-icons 使用教程

    前言 在前端开发中,图标是一个很重要的组成部分。通过使用图标可以提高用户的体验感,同时也可以简化页面结构,使页面更具可读性和易懂性。然而,在前端项目中找到合适的图标有时候是一件繁琐的事情。

    5 年前
  • npm 包 dom-to-image-more 使用教程

    前言 在前端开发的过程中,经常需要将 DOM 元素转化为图片,以供保存或分享。在实际开发中,也有很多情况需要在页面中嵌入海报或二维码等链接,此时将 DOM 转化为图片就显得尤为重要。

    5 年前
  • npm包@types/html2canvas使用教程

    1. 前言 html2canvas是一款很优秀的用于将网页截屏为图片的JavaScript库,可以在不需要浏览器插件的情况下获取当前网页的呈现。不过它是一个非常原始的JavaScript库,其函数类型...

    5 年前
  • npm 包 @types/hammerjs 使用教程

    在现代 web 开发中,手势交互已经成为了其中的重要一环。而在实现这一功能时,Hammer.js 是一款非常优秀的手势识别库。但在使用 TypeScript 编写代码时,我们需要额外安装一个类型声明文...

    5 年前
  • npm 包 @stencil/router 使用教程

    介绍 @stencil/router 是一款轻量级的客户端路由库,用于在 Web 应用中实现多路由的前端导航。它是由 StencilJS 团队开发的,非常适合 StencilJS 应用的使用。

    5 年前
  • npm包 @byteowls/capacitor-sms 使用教程

    前言 随着时代的发展,手机短信成为了一种重要的通信方式,而在前端领域,我们也可以使用 @byteowls/capacitor-sms 这个npm包来实现发送短信的功能。

    5 年前
  • npm 包 @angular-devkit/build-angular 使用教程

    前言 在现今的前端开发中,使用 AngularJS 已经成为了一种非常流行的技术。同时,AngularJS 也有很多的插件和工具,其中 @angular-devkit/build-angular 就是...

    5 年前

相关推荐

    暂无文章