npm 包 @mcshovel/gsdk-deploy 使用教程

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

介绍

@mcshovel/gsdk-deploy 是一个基于 Node.js 的 npm 包,用来发布 Gulp Starter Kit (GSK) 构建的前端项目。它提供了一套命令行工具来帮助我们发布代码到远程服务器,自动打包前端静态资源,并执行一些自定义脚本。

在接下来的文章中,我们将学习如何使用 @mcshovel/gsdk-deploy 包来构建和发布我们的前端项目。

安装

我们可以使用 npm 来安装 @mcshovel/gsdk-deploy 包。需要先在本地全局安装 gulp 和 gulp-cli:

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

然后再安装 @mcshovel/gsdk-deploy:

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

配置

在使用 @mcshovel/gsdk-deploy 之前,我们需要对配置文件进行一些修改。这个文件位于项目根目录下的 deploy.config.js,该文件包含了我们的项目配置信息,如下所示:

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

在该文件中,我们需要配置以下参数:

  • host: 目标服务器地址
  • username: 目标服务器登录用户名
  • password: 目标服务器登录密码
  • localPath: 本地需要部署的文件所在目录
  • remotePath: 目标服务器远程部署路径
  • beforeDeploy: 部署前需要运行的自定义脚本路径
  • afterDeploy: 部署后需要运行的自定义脚本路径

其中,beforeDeployafterDeploy 是可选字段,如果我们没有需要运行的脚本,则可以忽略这个参数。

使用

在我们配置好 deploy.config.js 文件之后,我们可以使用下面的命令来部署我们的项目:

-----------

执行该命令后,@mcshovel/gsdk-deploy 将会自动运行 gulp 编译命令,打包我们的项目并将打包后的文件上传到目标服务器的远程目录。同时会运行我们配置的 beforeDeployafterDeploy 脚本。

示例代码

下面是一个完整的 deploy.config.js 文件的示例代码:

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

我们可以将其复制到项目根目录下,并根据实际情况进行配置即可。

总结

本文介绍了如何使用 @mcshovel/gsdk-deploy 包来部署前端项目。只需要通过简单配置就可以实现自动打包和部署,大大提高了前端开发效率。在实际使用过程中,我们也可以根据自己的需求来编写自定义部署脚本,以达到更高的灵活性和便利性。

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


猜你喜欢

  • npm 包 sys-utils 使用教程

    前言 在前端开发中,我们经常需要使用系统级别的工具来处理一些操作系统相关的任务,例如路径管理、网络通信以及文件读写等。不过,由于前端开发并不需要太深入地了解操作系统的底层原理,因此我们需要一个方便且易...

    2 年前
  • npm 包 @art-of-coding/eshu 使用教程

    前言 对于前端开发者来说,使用 npm 包已经是家常便饭了。npm 上有各种丰富的开源项目和工具库,让我们的开发事半功倍。而在这些库中,@art-of-coding/eshu 可能是一个相对陌生的名称...

    2 年前
  • npm 包 cfi-algebra-manipulator 使用教程

    CFI Algebra 是一种 ePub 电子书格式中用来表示内容的定位系统。CFI (Continous Pagination Identifier) 由一系列的字符组成,用来描述电子书中的一个特定...

    2 年前
  • npm 包 sys-configs 使用教程

    简介 sys-configs 是一款 Node.js 模块,该模块为开发者提供了查看系统各项参数的接口。它能够返回 CPU 使用率、内存使用情况、磁盘使用情况等参数,并可根据需要自定义返回结果。

    2 年前
  • npm 包 hawkular-charts 使用教程

    简介 hawkular-charts 是一个基于 Hawkular 平台的 JavaScript 图表库,可以用于前端开发中。它提供了多种不同的图表类型,并支持多种自定义选项,可用于展示数据、统计数据...

    2 年前
  • npm 包 metalsmith-movey 使用教程

    Metalsmith Movey 是一个简单易用的 Metalsmith 插件,用于处理文件重命名和移动等操作。它可以帮助前端开发者轻松地自动化文件操作,减少手动工作量,提高工作效率。

    2 年前
  • npm 包 strip-trailing-slashes 使用教程

    如果你是在开发前端 Web 应用或者网站的时候,你可能会遇到一个很常见的问题:URL 或者路径结尾多余的斜杠。这个问题可能会导致一些不必要的问题,例如:请求 API 返回错误,链接跳转出现错误等等。

    2 年前
  • npm 包 cute-menu 使用教程

    前言 在前端开发中,我们经常需要使用一些插件和库来提升开发效率和用户体验。npm 是一个非常实用的包管理工具,可以方便地管理和使用各种开源库和插件。cute-menu 是一个基于 jQuery 的简单...

    2 年前
  • 前端必备技能:npm 包 headportrait 使用教程

    作为前端开发者,我们时常需要在网站或应用程序中显示用户头像。在过去,我们可能需要为每个用户的头像分别编写代码,这是一项费时费力的任务。但现在,使用 npm 包 headportrait 可以轻松地解决...

    2 年前
  • NPM 包 @bennadel/circuit-breaker 使用教程

    前言 在以前的前端开发中,我们通常会使用 Ajax 请求接口来获取数据。但是,单纯的 Ajax 请求也存在一些问题,比如在服务端故障的情况下,前端一直等待返回结果,导致前端的应用程序失去响应能力。

    2 年前
  • npm 包 ember-frost-buckets 使用教程

    在前端开发中,我们经常会有需求需要实现一些基于鼠标或键盘事件的页面交互效果,而要实现这些交互效果,就需要使用一些能够帮助我们快速开发的工具类库或框架,而 ember-frost-buckets 就是其...

    2 年前
  • npm 包 amit-highcharts 使用教程

    前言 Highcharts 是一个非常优秀的 JavaScript 图表库,在数据可视化方面提供了强大的支持。但是在实际项目中,我们通常需要更为定制化的需求,因此我们需要使用一些封装好的 Highch...

    2 年前
  • npm 包 karma-yuitest-framework 使用教程

    前言 在前端开发中,我们经常会使用一些自动化测试工具来保证代码的正确性以及保障软件质量。Karma 是一个非常流行的 JavaScript 测试运行器,可以与多种测试框架一起使用。

    2 年前
  • npm 包 ng2-bootstrap-list-swipe 使用教程

    简介 ng2-bootstrap-list-swipe 是一个 Angular 2+ 的 npm 包,用于在移动端为列表项添加 swipe 左右滑动事件,实现类似 iOS 中 swipe to del...

    2 年前
  • npm 包 webpack-later 使用教程

    前言 在前端开发中,我们经常需要使用 webpack 来打包前端代码。然而,当我们的项目变得复杂之后,webpack 配置也变得越来越复杂,给我们的工作带来了很多挑战。

    2 年前
  • npm 包 kibana-123 使用教程

    Kibana-123 是一款流行的数据可视化工具,为前端开发人员提供了一个强大的平台,让他们可以通过简单的操作和配置来创建和呈现动态和交互式的数据图表。在本文中,我们将学习如何使用 npm 包 kib...

    2 年前
  • npm 包 modal-popup 使用教程

    简介 modal-popup 是一个基于 jQuery 的简单模态框插件。它可用于创建响应式和可定制的模态框,支持回调以及自定义事件。 本文将为大家详细介绍如何使用 modal-popup,包括安装、...

    2 年前
  • npm 包 gentjs 使用教程

    前言 gentjs 是一个简单易用的 JavaScript 库,它提供了快速生成假数据的方法,非常适合在开发过程中进行测试和调试。它拥有各种数据类型和功能,可以帮助开发者快速生成需要的假数据,并且支持...

    2 年前
  • npm 包 paypal-utils 使用教程

    介绍 npm 包 paypal-utils 是一个用于处理 PayPal 前端开发的 JavaScript 工具库。该库提供了一系列工具函数,方便开发者集成 PayPal 支付功能,包括金额格式化、货...

    2 年前
  • npm 包 fh-wfm-mongo-store 使用教程

    简介 fh-wfm-mongo-store 是一个 Node.js 模块,用于管理 MongoDB 数据库。它是一个基于 fh-mbaas-api 的分支,主要用于为 FeedHenry 所提供的工作...

    2 年前

相关推荐

    暂无文章