npm 包 brander-gulp-tasks 使用教程

简介

brander-gulp-tasks 是一个基于 gulp 的前端自动化构建工具的 npm 包，可以帮助开发者快速构建和打包项目，支持常见的前端技术，如：es6、scss、pug 等，同时也支持自定义任务和配置。

安装

在项目目录下执行以下命令安装 brander-gulp-tasks：

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

使用

  1. 在项目根目录创建 gulpfile.js 文件，引入 brander-gulp-tasks：

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

  2. 运行 gulp 命令即可，此时 gulp 将执行默认任务（包括编译 es6、scss、pug 等任务）。

  3. 你也可以在 package.json 中添加 scripts 命令，如：

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

    之后可以使用 npm run dev 或 npm run build 来运行相应的 gulp 命令。

自定义任务

除了默认任务，brander-gulp-tasks 还支持自定义任务：

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

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

执行自定义任务：

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

配置

brander-gulp-tasks 默认配置如下：

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

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

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

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

任何配置项都可以被覆盖，可以在 gulpfile.js 中自定义配置：

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

示例代码

下面是一个完整的例子，包括自定义任务、自定义配置以及使用 browsersync 实时预览。

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

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

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

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

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

总结

brander-gulp-tasks 是一个非常好用的前端构建工具，在前端开发过程中，我们可以通过它来自动进行代码转换、打包、预处理等，从而提升开发效率。同时，其内置的常用的功能和灵活的配置方式也使得它可以适应不同团队的需求。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066c84ccdc64669dde4ea8

阅读全文

猜你喜欢

  • npm 包 brandicons 使用教程

    在前端开发中，我们经常需要使用一些图标来美化页面或者用作交互元素。npm 包 brandicons 是一个非常好用的 CSS 图标库，它提供了多种高质量的品牌图标，这些图标都可以非常方便地在页面中使用...

    4 年前
  • npm包bp-angular-credit-cards使用教程

    什么是bp-angular-credit-cards？ bp-angular-credit-cards是一个AngularJS模块，用于在前端实现信用卡表单验证和显示卡片效果。

    4 年前
  • npm 包 bower-dependencies-collector 使用教程

    前言 在项目中，我们经常需要借助第三方库来增强我们的功能。而这些库通常以 npm 包或者 Bower 增加了我们的依赖树，依赖的管理变得越来越困难。bower-dependencies-collect...

    4 年前
  • npm包bower-dependencies-resolver使用教程

    简介 bower-dependencies-resolver是一个npm包，它为前端开发人员提供了一种自动解决bower依赖关系的方法。它会自动找到并获取bower配置文件，并安装所有相关依赖项。

    4 年前
  • npm 包 bower-deploy 使用教程

    在前端开发的过程中，我们经常需要使用各种第三方库来完成我们的工作。而这些第三方库通常都通过包管理工具进行安装和管理。npm 是 Node.js 的包管理工具，而 bower 则是专门为前端开发设计的包...

    4 年前
  • npm包：bower-dependency-tree使用教程

    在前端开发中，我们常常会使用到第三方库和插件。为了快捷方便地管理这些外部依赖，我们通常会使用一个叫做bower的包管理器。但是，随着项目变得越来越复杂，管理这些依赖关系也变得越来越困难。

    4 年前
  • npm 包 HTML Entity Decoder 使用教程

    在前端开发中，我们常常会遇到需要将 HTML 实体编码转化为常规文本的需求。比如说，我们可能需要将代码中的 < 转化成 <，将 & 转化成 & 等等。

    4 年前
  • npm 包 borschik-tech-csso 使用教程

    什么是 borschik-tech-csso borschik-tech-csso 是一个基于 csso 的前端工具，能够对 CSS 文件进行压缩和优化，使得 CSS 文件更加精简并提升网页的渲染速度...

    4 年前
  • npm包 borschik-tech-csso-next 使用教程

    一、前言 在前端开发中，CSS的压缩和优化是常见的需求。本文介绍一个基于csso（A CSS minifier）的npm包：borschik-tech-csso-next，通过它可以对CSS进行压缩和...

    4 年前
  • npm 包 bower-check-updates 使用教程

    前言 如果你正在使用 bower 管理你的前端依赖库，可能会碰到这样的情况：当你在使用一个版本较老的依赖库时，你的应用程序可能不能与最新版本的浏览器兼容。如果你想要解决这个问题，你需要手动检查每个库的...

    4 年前
  • npm Package BoxyJS 使用教程

    在前端开发中，我们常常需要实现一些与盒子有关的功能，比如生成一个可以缩放、拖拽的盒子，或者计算两个盒子的碰撞、重叠等问题。这时候，一个名为 BoxyJS 的 npm 包就可以派上用场了。

    4 年前
  • npm 包 bower-complete 使用教程

    介绍 bower-complete 是一个 NPM 包，可以帮助前端开发者完成类似于 Bash 中的命令补全的功能。它可以减少开发过程中由于单词拼写错误等问题带来的麻烦，提高开发效率。

    4 年前
  • npm 包 bower-conflict 使用教程

    在前端开发过程中，我们经常使用包管理工具来安装和管理项目所需要的依赖包。其中，npm 和 bower 是两个非常流行的包管理工具，但是它们之间有时会出现依赖包的冲突问题，为了解决这个问题，我们可以使用...

    4 年前
  • npm 包 bower-conflict-view 使用教程

    简介 在前端开发中，我们常常使用 bower 进行包管理，但是当我们使用不同的项目、不同的工具或者不同的团队协作时，可能会出现 bower 包冲突的问题。当我们在项目中引入不同版本的同一个包或者同一个...

    4 年前
  • npm 包 bp-router-core 使用教程

    在前端开发过程中，很多时候需要实现路由跳转的功能。npm 包 bp-router-core 就是一个可以方便地帮助我们实现路由跳转的工具。 在本篇文章中，我们将详细介绍如何使用 npm 包 bp-ro...

    4 年前
  • npm 包 bp-sideburns 使用教程

    介绍 bp-sideburns 是一个基于 Bootstrap 的侧边栏组件库。它提供了多种样式和可定制的选项，可以帮助开发者快速搭建侧边栏。 安装 bp-sideburns 可以通过 npm 进行安...

    4 年前
  • npm 包 bp-utilities 使用教程

    简介 bp-utilities 是一个前端工具包，提供了很多好用的工具类方法，帮助开发者在项目中快速、高效地实现各种需求。它基于 ES6+，提供了类型安全的函数和方法，且具有良好的兼容性和可扩展性。

    4 年前
  • npm 包 bp.js 使用教程

    简介 bp.js 是一个用于浏览器端构建神经网络的 JavaScript 库。它提供了多种常用的神经网络模型，并且支持自定义模型，可以方便快捷地搭建自己想要的神经网络模型。

    4 年前
  • npm 包 bp_cookie 使用教程

    前言 在前端开发中，我们经常需要在浏览器端保存用户的登录状态、设置一些用户偏好等信息。为了方便在代码中操作浏览器的 cookie 数据，我们可以使用 npm 包 bp_cookie。

    4 年前
  • npm 包 borschik-tech-istanbul 使用教程

    在前端开发中，我们常常需要使用各种工具来帮助我们更高效地完成任务。而 borschik-tech-istanbul 这个 npm 包就是其中一个非常实用的工具，它能够帮助我们生成 Istanbul 覆...

    4 年前

相关推荐

    暂无文章